BootstrapTable相同内容单元格合并这个功能的思路来⾃于这⾥
把这位⼤神的js改的更加适⽤了⼀些
效果图如下
BootstrapTable 怎么使⽤我就不过多描述了，⼤家可以⾃⾏查询相关资料。
多⾏表头的实现：在onClickRow⾥配置类似如下
onClickRow: function(row, $el){
},
columns: [[{
colspan: 1,
rowspan: 2,
checkbox: true
}
,{
field: 'ar',
title: '年份',
colspan: 1,
rowspan: 2,
sortable: true
}
,{
field: 'physicalTestId.name',
title: '体能测试',
colspan: 1,
rowspan: 2,
sortable: true
}
,{
field: 'people.name',
title: '姓名',
colspan: 1,
rowspan: 2,
sortable: true
bootstrap项目}
,{
field: 'people.sex',
title: '性别',
colspan: 1,
rowspan: 2,
rowspan: 2,
sortable: true,
formatter:function(value, row , index){
DictLabel(${fns:toJson(fns:getDictList('sex'))}, value, "-");          }
}
,{
field: 'age',
title: '年龄',
colspan: 1,
rowspan: 2,
sortable: true
}
,
{
field: 'people.unit.name',
title: '单位',
colspan: 1,
rowspan: 2,
sortable: true
}
,{
field: 'people.position',
title: '职务',
colspan: 1,
rowspan: 2,
sortable: true
}
,{
title: '测试项⽬',
colspan: 3,
rowspan: 1,
valign:"middle",
align:"center"
}
],
[
{
field: 'physicalTestItemId.name',
title: '项⽬名称',
sortable: true
}
,{
field: 'isReplace',
title: '是否替',
sortable: true
}
,
{
field: 'testResult',
title: '替进度',
sortable: true
}
]
],
合并单元格：
onLoadSuccess : function(data) {
var data = $('#physicalTestEnrollTable').bootstrapTable('getData', true);
// 合并单元格
var fieldList=["ar","physicalTestId.name",
"people.name","people.sex","age","people.unit.name","people.position"];
mergeCells(data, "people.name", 1, $('#physicalTestEnrollTable'),fieldList);
}
/**
* 合并单元格
*
* @param data
*            原始数据（在服务端完成排序）
* @param fieldName
*            合并参照的属性名称
* @param colspan
*            合并开始列
* @param target
*            ⽬标表格对象
* @param fieldList
*            要合并的字段集合
*/
function mergeCells(data,fieldName,colspan,target,fieldList){
// 声明⼀个map计算相同属性值在data对象出现的次数和
var sortMap = {};
for(var i = 0 ; i < data.length ; i++){
for(var prop in data[i]){
//例如people.unit.name
var fieldArr=fieldName.split(".");
getCount(data[i],prop,fieldArr,0,sortMap);
}
}
var index = 0;
for(var prop in sortMap){
var count = sortMap[prop];
for(var i = 0 ; i < fieldList.length ; i++){
$(target).bootstrapTable('mergeCells',{index:index, field:fieldList[i], colspan: colspan, rowspan: count});            }
index += count;
}
}
/**
* 递归到最后⼀层统计数据重复次数
* ⽐如例如people.unit.name 就⼀直取到name
* 类似于data["people"]["unit"]["name"]
*/
function getCount(data,prop,fieldArr,index,sortMap){
if(index == fieldArr.length-1){
if(prop == fieldArr[index]){
var key = data[prop];
if(sortMap.hasOwnProperty(key)){
sortMap[key] = sortMap[key]+ 1;
} else {
sortMap[key] = 1;
}
}
return;
}
if(prop == fieldArr[index]){
var sdata = data[prop];
index=index+1;
getCount(sdata,fieldArr[index],fieldArr,index,sortMap);    }
}