Bootstrap-table 單元格合並 、表頭合並

1.頁面引入js/css

@*1、Jquery組件引用*@
<script src="~/Scripts/jquery-1.10.2.js"></script>
 
@*2、bootstrap組件引用*@
<script src="~/Content/bootstrap/bootstrap.js"></script>
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
 
@*3、bootstrap table組件以及中文包的引用*@
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2.頁面定義一個table

 <div class="col-sm-12 select-table table-striped">
      <table id="table"></table>
  </div>

3.初始化js文件

function initTable() {

  $('#table').bootstrapTable('destroy');
  $('#table').bootstrapTable({
    url: ctx + 'mergeCell/mergeCellData',
    method: 'post',//請求方式
    contentType: "application/x-www-form-urlencoded",
    sortOrder: "desc",
    uniqueId: "tid", // 每一行的唯一標識，一般為主鍵列
    striped: true,   //是否顯示行間隔色
    pagination: true, // 是否分頁
    sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*）
    striped: true, // 是否顯示行間隔色t
    pagination: true, // 是否分頁
    pageSize: 10,
    pageList: [10,15,30],
    responseHandler: false,
    columns: [
      [
        {field: 'tname', title: '名稱', rowspan: 2, valign: 'middle', halign: "center", align: 'center'},
        {field: 'tid', title: '主鍵', rowspan: 2, valign: 'middle', halign: "center", align: 'center'},
        {field: 'tcode', title: '代碼', rowspan: 2, valign: 'middle', halign: "center", align: 'center'},
        {field: 'createTime', title: '時間', rowspan: 2, valign: 'middle', halign: "center", align: 'center'},
        {title: '地區', colspan: 2, align: 'center', valign: 'middle', halign: "center", align: 'center'}
      ],
      [
        {field: 'strDefault1', title: '地區一', align: 'center', halign: "center"},
        {field: 'strDefault2', title: '地區二', align: 'center', halign: "center"}
      ]
    ],
  });
  $('#table').bootstrapTable('resetView');
}

4.合並單元格的js

/*
合並行
 @param data  原始數據（在服務端完成排序）
 @param fieldName 合並屬性名稱數組
 @param colspan 列數
 @param target 目標表格對象
*/
function mergeCells(data, fieldName, colspan, target) {
  if (data.length == 0) {
    alert("不能傳入空數據");
    return;
  }
  var numArr = [];
  var value = data[0][fieldName];
  var num = 0;
  for (var i = 0; i < data.length; i++) {
    if (value != data[i][fieldName]) {
      numArr.push(num);
      value = data[i][fieldName];
      num = 1;
      continue;
    }
    num++;
  }
  if (typeof (value) != "undefined" && value != "") {
    numArr.push(num);
  }
  var merIndex = 0;
  for (var i = 0; i < numArr.length; i++) {
    $(target).bootstrapTable('mergeCells',
        {
          index: merIndex,
          field: fieldName,
          colspan: colspan,
          rowspan: numArr[i]
        })
    merIndex += numArr[i];
  }
}

5.完整j$(function () {  initTable();

}) /** * 初始化 table 數據 */ function initTable() { $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url: ctx + 'mergeCell/mergeCellData', method: 'post',//請求方式 contentType: "application/x-www-form-urlencoded", sortOrder: "desc", uniqueId: "tid", // 每一行的唯一標識，一般為主鍵列 striped: true, //是否顯示行間隔色 pagination: true, // 是否分頁 sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*） striped: true, // 是否顯示行間隔色t pagination: true, // 是否分頁 pageSize: 10, pageList: [10,15,30], responseHandler: false, onLoadSuccess: function (data) { var data = $('#table').bootstrapTable('getData', true);//獲取當前頁數據 mergeCells(data, "tname", 1, $('#table')); mergeCells(data, "tcode", 1, $('#table'));//行合並
　　　mergeColspan(data, ['tname','tcode'], $('#table'))；//列合並

}, onPageChange: function () {//當頁面更改頁碼或頁面大小時觸發 var data = $('#table').bootstrapTable('getData', true); mergeCells(data, "tname", 1, $('#table')); mergeCells(data, "tcode", 1, $('#table'));//行合並 }, columns: [ [ {field: 'tname', title: '名稱', rowspan: 2, valign: 'middle', halign: "center", align: 'center'}, {field: 'tid', title: '主鍵', rowspan: 2, valign: 'middle', halign: "center", align: 'center'}, {field: 'tcode', title: '代碼', rowspan: 2, valign: 'middle', halign: "center", align: 'center'}, {field: 'createTime', title: '時間', rowspan: 2, valign: 'middle', halign: "center", align: 'center'}, {title: '地區', colspan: 2, align: 'center', valign: 'middle', halign: "center", align: 'center'} ], [ {field: 'strDefault1', title: '地區一', align: 'center', halign: "center"}, {field: 'strDefault2', title: '地區二', align: 'center', halign: "center"} ] ], }); $('#table').bootstrapTable('resetView'); } /* 合並行 @param data 原始數據（在服務端完成排序） @param fieldName 合並屬性名稱數組 @param colspan 列數 @param target 目標表格對象 */ function mergeCells(data, fieldName, colspan, target) { if (data.length == 0) { alert("不能傳入空數據"); return; } var numArr = []; var value = data[0][fieldName]; var num = 0; for (var i = 0; i < data.length; i++) { if (value != data[i][fieldName]) { numArr.push(num); value = data[i][fieldName]; num = 1; continue; } num++; } if (typeof (value) != "undefined" && value != "") { numArr.push(num); } var merIndex = 0; for (var i = 0; i < numArr.length; i++) { $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] }) merIndex += numArr[i]; } } /** * 合並列 * @param data 原始數據（在服務端完成排序） * @param fieldName 合並屬性數組 * @param target 目標表格對象 */ function mergeColspan(data, fieldNameArr, target) { if (data.length == 0) { alert("不能傳入空數據"); return; } if (fieldNameArr.length == 0) { alert("請傳入屬性值"); return; } var num = -1; var index = 0; for (var i = 0; i < data.length; i++) { num++; for (var v in fieldNameArr) { index = 1; if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) { index = 0; break; } } if (index == 0) { continue; } $(target).bootstrapTable('mergeCells', {index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1}); } }

6.后台數據

　

@ResponseBody
  @PostMapping("/mergeCellData")
  public List<Norm> mergeCellData(){
    List<Norm> list = new ArrayList<>();
    Norm norm1 = new Norm();
    norm1.setTid(new BigDecimal(1));
    norm1.setTname("合並指標1");
    norm1.setTcode("代碼1");
    norm1.setCreateTime(new Date());
    norm1.setStrDefault1("昌平");
    norm1.setStrDefault2("大興");

    Norm norm2 = new Norm();
    norm2.setTid(new BigDecimal(2));
    norm2.setTname("合並指標1");
    norm2.setTcode("代碼2");
    norm2.setCreateTime(new Date());
    norm2.setStrDefault1("昌平");
    norm2.setStrDefault2("大興");

    Norm norm3 = new Norm();
    norm3.setTid(new BigDecimal(3));
    norm3.setTname("合並指標2");
    norm3.setTcode("代碼3");
    norm3.setCreateTime(new Date());
    norm3.setStrDefault1("咸陽");
    norm3.setStrDefault2("楊凌");


    Norm norm4 = new Norm();
    norm4.setTid(new BigDecimal(4));
    norm4.setTname("合並指標3");
    norm4.setTcode("代碼3");
    norm4.setCreateTime(new Date());
    norm4.setStrDefault1("齊齊哈爾");
    norm4.setStrDefault2("哈爾冰");

    Norm norm5 = new Norm();
    norm5.setTid(new BigDecimal(5));
    norm5.setTname("合並指標3");
    norm5.setTcode("代碼5");
    norm5.setCreateTime(new Date());
    norm5.setStrDefault1("朝陽");
    norm5.setStrDefault2("沙河");

    Norm norm6 = new Norm();
    norm6.setTid(new BigDecimal(6));
    norm6.setTname("合並指標6");
    norm6.setTcode("代碼6");
    norm6.setCreateTime(new Date());
    norm6.setStrDefault1("中國");
    norm6.setStrDefault2("美國");

    Norm norm7 = new Norm();
    norm7.setTid(new BigDecimal(1));
    norm7.setTname("合並指標1");
    norm7.setTcode("代碼1");
    norm7.setCreateTime(new Date());
    norm7.setStrDefault1("昌平");
    norm7.setStrDefault2("大興");

    Norm norm8 = new Norm();
    norm8.setTid(new BigDecimal(2));
    norm8.setTname("合並指標1");
    norm8.setTcode("代碼2");
    norm8.setCreateTime(new Date());
    norm8.setStrDefault1("昌d平");
    norm8.setStrDefault2("大d興");

    Norm norm9 = new Norm();
    norm9.setTid(new BigDecimal(3));
    norm9.setTname("合並指標10");
    norm9.setTcode("代碼3");
    norm9.setCreateTime(new Date());
    norm9.setStrDefault1("咸陽d");
    norm9.setStrDefault2("楊d凌");


    Norm norm10 = new Norm();
    norm10.setTid(new BigDecimal(4));
    norm10.setTname("合並指標10");
    norm10.setTcode("代碼3");
    norm10.setCreateTime(new Date());
    norm10.setStrDefault1("齊f齊哈爾");
    norm10.setStrDefault2("哈f爾冰");

    Norm norm11 = new Norm();
    norm11.setTid(new BigDecimal(5));
    norm11.setTname("合並指標16");
    norm11.setTcode("代碼5");
    norm11.setCreateTime(new Date());
    norm11.setStrDefault1("朝f陽");
    norm11.setStrDefault2("沙f河");

    Norm norm12 = new Norm();
    norm12.setTid(new BigDecimal(6));
    norm12.setTname("合並指標16");
    norm12.setTcode("代碼6");
    norm12.setCreateTime(new Date());
    norm12.setStrDefault1("中v國");
    norm12.setStrDefault2("美f國");

    list.add(norm1);
    list.add(norm2);
    list.add(norm3);
    list.add(norm4);
    list.add(norm5);
    list.add(norm6);
    list.add(norm7);
    list.add(norm8);
    list.add(norm9);
    list.add(norm10);
    list.add(norm11);
    list.add(norm12);

    return list;
  }

 

8.頁面效果圖

 

 

　

問題：

1.頁面不顯示數據，后台數據格式有問題（如果是前台分頁，后台數據返回LIst就可以，如果是后台分頁，返回數據格式是rows+tatol）

2.頁面點擊下一頁，數據沒有合並，沒有綁定頁面大小變化，數據重新加載，解決

 onPageChange: function () {//當頁面更改頁碼或頁面大小時觸發
      var data = $('#table').bootstrapTable('getData', true);
      mergeCells(data, "tname", 1, $('#table'));
      mergeCells(data, "tcode", 1, $('#table'));//行合並
    },

3.合並后數據居中顯示，屬性使用不對，正確屬性

4.　colspan(列)  rowspan(行)

　

 

　參考博客一

　參考博客二