html合并单元格置顶,表格使用 bootstrap table 合并相同的行

试试下面的代码：

var getData = ctx + "demo/table/list";

$("#table")

.bootstrapTable(

{

dataType : "json",

method : 'post',

cache : false,

url : getData,

columns : [

{

checkbox : true

},

{

field : 'userId',

title : '用户ID'

},

{

field : 'userCode',

title : '用户编号'

},

{

field : 'userName',

title : '用户姓名'

},

{

field : 'userPhone',

title : '用户手机'

},

{

field : 'userEmail',

title : '用户邮箱'

},

{

field : 'userBalance',

title : '用户余额'

},

{

title : '操作',

align : 'center',

formatter : function(value, row, index) {

var actions = [];

actions

.push('删除');

return actions.join('');

}

} ],

onLoadSuccess : function(data) {

var data = $('#table').bootstrapTable(

'getData', true);

//合并单元格

mergeCells($('#table'), data, "userName", 1);

mergeCells($('#table'), data, "userPhone", 1);

mergeCells($('#table'), data, "userEmail", 1);

}

});

/**

* 合并单元格

* @param data 原始数据(在服务端完成排序)

* @param fieldName 合并属性名称

* @param colspan 合并列

* @param target 目标表格对象

*/

function mergeCells(target, data, fieldName, colspan) {

//声明一个map计算相同属性值在data对象出现的次数和

var sortMap = {};

for (var i = 0; i < data.length; i++) {

for ( var prop in data[i]) {

if (prop == fieldName) {

var key = data[i][prop]

if (sortMap.hasOwnProperty(key)) {

sortMap[key] = sortMap[key] * 1 + 1;

} else {

sortMap[key] = 1;

}

break;

}

}

}

for ( var prop in sortMap) {

console.log(prop, sortMap[prop])

}

var index = 0;

for ( var prop in sortMap) {

var count = sortMap[prop] * 1;

$(target).bootstrapTable('mergeCells', {

index : index,

field : fieldName,

colspan : colspan,

rowspan : count

});

index += count;

}

}