爱站程序员基地文章目录
- Layui合并单元格，合并列
- 背景
- 场景1
- 合并单元格的方法
- 使用方法
Layui合并单元格，合并列
时间：20191219
背景
场景1
一张数据表中，某一列相同的数据需要合并展示
需求
- 前端使用layui框架
- 需要将一列中相同的数据进行单元格合并
- 性能搞
方案
- 第一步：使用原生layui生成数据表
- 第二步：遍历数据表
- 第三步：校验上一单元格的数据与下一个单元格数据是否相同，相同保留第一格，删除其他格子
- 第四步：计算保留单元格需要跨多少行
- 第五步：为保留单元格设置rowspan属性
实现
合并单元格的方法
/*** 单元格合并* @param table 要进行操作的表* @param column 要合并的列名称*/function rowspan(table, column) {debugger;// debugger;//获取到表格table = $(\"#\" + table + \"-content\");//找到所有格子let tds = table.find(\'td[data-field=\\\'\' + column + \'\\\']\');//操作第几个格子let actionTd;//合并个数let rowspanNum = 0;//上一个格子数据let preValue = \"\";//待删除数据let deleteTd = [];for (let i = 0; i <= tds.length; i++) {let td;let tdValue;//针对最后一行，不能合并单元格if (i!==tds.length){//当前操作的数据格td = $(tds[i]);//获取每个格子的数据tdValue = $(td.find(\'div.layui-table-cell\')).text();}//如果当前数据和上一个数据相等if (tdValue === preValue) {//合并个数自增rowspanNum++;//将当前数据格，放入到待删除数据中deleteTd.push(td);} else {//不相等//检查待删除数据中是否有数据，检查数据长度if (deleteTd.length >= 1) {//删除数据for (let j = 0; j < deleteTd.length; j++) {deleteTd[j].remove();}//合并数据actionTd.attr(\"rowspan\", rowspanNum+1);//清空数据actionTd = null;rowspanNum = null;preValue = \"\";deleteTd = [];}//保存第一次出现数据的格子actionTd = td;}//更新preValuepreValue = tdValue;}}
使用方法
table.render({elem: \'#LAY-table\',url: urls.list,cols: [[]],done: function (resp) {//在这里使用方法 \'LAY-table\'为idrowspan(\'LAY-table\',\'filedName\');rowspan(\'LAY-table\',\'filedName\');}});
缺点
- layui使用fixed属性时，需要做特殊处理
- 一经使用方法，指定列中所有相同数据都会被合并，不支持指定行合并（例：每两行相同的数据进行合并）
写在最后
layui社区中有很多实现单元格合并的方法，可以进行参考，同时，layui也提供了单元格合并插件，但是我在接手这个需求的时候，没有找到插件，所以花时间初略的实现了这个功能，希望能给大家提供一些帮助
