在限定字段内合并单元格
今天遇到一个需求,简单来说就是合并单元格,但我实现时发现,要求其合并时,在国家相同的字段内才允许合并,遇见更复杂的需求,需要的父类可能为多个,所有我就在之前简单的合并单元格的方法基础上进行了部分修改。
/**
* 在限定字段内合并单元格
* @param data 原始数据(在服务端完成排序)
* @param fieldName 合并属性名称
* @param limitFieldNameList 限制在哪个属性名称内合并,为数组
* @param colspan 合并列
*/
function mergeCellsLimit(data, fieldName, limitFieldNameList, colspan) {
//声明一个map计算相同属性值在data对象出现的次数和
var sortMap = {};
for (var i = 0; i < data.length; i++) {
for (var prop in data[i]) {
if (prop == fieldName) { // 防止出现乱合并
// 部分字段要在某个字段内合并,不同limitFieldName字段的fieldName就算相同也不合并
var key = data[i][prop] === "" || data[i][prop] === 0 ? "无值" : data[i][prop];
for (var limitFieldNameListIndex = 0; limitFieldNameListIndex < limitFieldNameList.length; limitFieldNameListIndex++) {
key = key + data[i][limitFieldNameList[limitFieldNameListIndex]];
}
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;
$('#bootstrap-table').bootstrapTable('mergeCells', {
index: index,
field: fieldName,
colspan: colspan,
rowspan: count
}); // 进行合并单元格
index += count;
}
}
然后在表格设置中调用,方法如下
onLoadSuccess: function (data) {
var data = $('#bootstrap-table').bootstrapTable('getData', true);
//合并单元格
mergeCellsLimit(data, "field",["limitField"], 1, $('#bootstrap-table'));
},
效果图