1.頁面引入js/css

@*1、Jquery組件引用*@

@*2、bootstrap組件引用*@

@*3、bootstrap table組件以及中文包的引用*@

2.頁面定義一個table

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 mergeCellData(){

List 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(行)

總結

以上是生活随笔為你收集整理的bootstraptable合并标题_Bootstrap-table 单元格合并 、表头合并的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。