bootstrap Table行合并使用示例
发布于 2020-10-27 BootstrapTable bootstrap
行合并方法
/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param target 目标表格对象 */ function mergeCells(data, fieldName, colspan, target) { //声明一个map计算相同属性值在data对象出现的次数和 var sortMap = []; var lastKey; for (var i = 0; i < data.length; i++) { for (var prop in data[i]) { if (prop == fieldName) { var key = data[i][prop]; if (key == lastKey) { sortMap[sortMap.length - 1].val += 1; } else { sortMap.push({ key: key, val: 1 }) lastKey = key; } break; } } } var index = 0; for (var i = 0; i < sortMap.length; i++) { var item = sortMap[i]; var count = item.val * 1; target.bootstrapTable('mergeCells', { index: index, field: fieldName, colspan: colspan, rowspan: count }); index += count; } }
使用方法
在bootstraptable增加onLoadSuccess属性设置
onLoadSuccess: function (data) { data = $('#table').bootstrapTable('getData', true); mergeCells(data, "project_Name", 1, "#table") },