在限定字段内合并单元格
今天遇到一个需求,简单来说就是合并单元格,但我实现时发现,要求其合并时,在国家相同的字段内才允许合并,遇见更复杂的需求,需要的父类可能为多个,所有我就在之前简单的合并单元格的方法基础上进行了部分修改。
/** * 在限定字段内合并单元格 * @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')); },
效果图