layui数据表格跨行自动合并的例子

今天小编就为大家分享一篇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;//以前列单元格为基础获取的最大合并数 let finalNextIndex;//获取其下第一个不合并单元格的index let finalNextKey;//获取其下第一个不合并单元格的值 for(let i = 0; i 9000||!maxNum)&&(maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):9999); let key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;//获取下一个单元格的值 let nextIndex = i+1; let tdNum = childFilterTextObj[key]; let curNum = maxNum<tdNum?maxNum:tdNum; if(canRowspan){ for(let j =1;j<=curNum&&(i+j1)||maxNum == j){ canRowspan = true; curNum = j; break; } j++; if((i+j)==childFilterArr.length){ finalNextKey=undefined; finalNextIndex=i+j; break; } } childFilterArr[i].setAttribute("rowspan",curNum); if($(childFilterArr[i]).find("div.rowspan").length>0){//设置td内的div.rowspan高度适应合并后的高度 $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent"); $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height= curNum*38-10 +"px"; } canRowspan = false; }else{ childFilterArr[i].style.display = "none"; } if(--childFilterTextObj[key]==0|--maxNum==0|--curNum==0|(finalNextKey!=undefined&&nextIndex==finalNextIndex)){//||(finalNextKey!=undefined&&key!=finalNextKey) 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：

  
 
 
 
省
市
区
昵称
加入时间
签名
基本操作
 
 
浙江
杭州
西湖区
贤心1
2016-11-28
人生就像是一场修行 A
  按钮1按钮2
 
浙江
这个
西湖区
贤心2
2016-11-29
人生就像是一场修行 B
  按钮1按钮2
 
浙江
丽水
莲都区
贤心3
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
浙江
丽水
莲都区
贤心3
2016-19-30
人生就像是一场修行 C
  按钮1按钮2
 
浙江
位置
莲都区
贤心3
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
湖北
位置
莲都区
贤心3
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
湖北
这个
1区
贤心3
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
湖北
这个
1区
贤心3
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
湖北
这个
1区
贤心3
2016-11-30
人生就像是一场修行 B
  按钮1按钮2
 
湖北
这个
1区
贤心
2016-11-30
人生就像是一场修行 B
  按钮1按钮2
 
湖北
这个
1区
贤心
2016-11-30
人生就像是一场修行 C
  按钮1按钮2
 
湖北
这个
1区
贤心
2016-11-30
人生就像是一场修行 D
  按钮1按钮2

 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数据表格跨行自动合并的例子的详细内容，更多请关注本站其它相关文章！