本篇文章给大家带来的内容是关于layui数据表格如何实现自动合并（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
需求描述：
在数据表格中，对于按某个分类展示数据其分类下又有多个细分的嵌套细分项，如省市区昵称，省下面有多个市，市下面有多个区，区下面有昵称，需要实现跨行合并，且操作按钮以分类为单位（即操作按钮需按照分类合并）。
需求分析：
除操作列外，以左边列为基础单位进行跨行合并，当前单元格合并数<=左边列；
操作列可以选择任意列作为基础单位（这个待完善）。
原始页面：
处理页面：
方法：
var execrowspan = function(fieldname,index,flag){ // 1为不冻结的情况，左侧列为冻结的情况 let fixednode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l")); // 左侧导航栏不冻结的情况 let child = $(fixednode).find("td"); let childfilterarr = []; // 获取data-field属性为fieldname的td for(let i = 0; i < child.length; i++){ if(child[i].getattribute("data-field") == fieldname){ childfilterarr.push(child[i]); } } // 获取td的个数和种类 let childfiltertextobj = {}; for(let i = 0; i < childfilterarr.length; i++){ let childtext = flag?childfilterarr[i].innerhtml:childfilterarr[i].textcontent; if(childfiltertextobj[childtext] == undefined){ childfiltertextobj[childtext] = 1; }else{ let num = childfiltertextobj[childtext]; childfiltertextobj[childtext] = num*1 + 1; } } let canrowspan = true; let maxnum = 9999; for(let i = 0; i < childfilterarr.length; i++){ maxnum = $(childfilterarr[i]).prev().attr("rowspan")&&fieldname!="8"?$(childfilterarr[i]).prev().attr("rowspan"):maxnum; let key = flag?childfilterarr[i].innerhtml:childfilterarr[i].textcontent; let tdnum = childfiltertextobj[key]; let curnum = maxnum<tdnum?maxnum:tdnum; let nextkey; for(let j =1;j<curnum&&(i+j<childfilterarr.length);j++){ nextkey = flag?childfilterarr[i+j].innerhtml:childfilterarr[i+j].textcontent; if(key!=nextkey&&curnum>1){ canrowspan = true; curnum = j; } } if(canrowspan){ childfilterarr[i].setattribute("rowspan",curnum); if($(childfilterarr[i]).find("p.rowspan").length>0){//设置td内的p.rowspan高度适应合并后的高度 $(childfilterarr[i]).find("p.rowspan").parent("p.layui-table-cell").addclass("rowspanparent"); $(childfilterarr[i]).find("p.layui-table-cell")[0].style.height= curnum*38-10 +"px"; } canrowspan = false; }else{ childfilterarr[i].style.display = "none"; } if(maxnum){ maxnum--; } if(--childfiltertextobj[key]==0||maxnum==0||(nextkey!=undefined&&key!=nextkey)){ canrowspan = true; } }}//合并数据表格行var layuirowspan = function(fieldnametmp,index,flag){ let fieldname = []; if(typeof fieldnametmp == "string"){ fieldname.push(fieldnametmp); }else{ fieldname = fieldname.concat(fieldnametmp); } for(let i = 0;i<fieldname.length;i++){ execrowspan(fieldname[i],index,flag); }}
使用：
html：
<p class="box"><table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'province', width:200}">省</th> <th lay-data="{field:'city', width:200}">市</th> <th lay-data="{field:'zone', width:200}">区</th> <th lay-data="{field:'username', width:200}">昵称</th> <th lay-data="{field:'jointime', width:150}">加入时间</th> <th lay-data="{field:'sign', minwidth: 180}">签名</th> <th lay-data="{field:'8',align:'right'}">基本操作</th> </tr> </thead> <tbody> <tr> <td>浙江</td> <td>杭州</td> <td>西湖区</td> <td>贤心1</td> <td>2016-11-28</td> <td>人生就像是一场修行 a</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>这个</td> <td>西湖区</td> <td>贤心2</td> <td>2016-11-29</td> <td>人生就像是一场修行 b</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>丽水</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>丽水</td> <td>莲都区</td> <td>贤心3</td> <td>2016-19-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>位置</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>位置</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 b</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 b</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 c</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 d</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> </tbody></table> </p>
layui.use('table', function(){ var table = layui.table; table.init('test',{done:function(res,curr,count){ layuirowspan('province',1); layuirowspan(['city','zone','username','jointime','sign'],1);//支持数组 layuirowspan("8",1,true); } });})
相关推荐：
layui实现动态和静态数据表分页
以上就是layui数据表格如何实现自动合并（代码）的详细内容。