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 < childFilterArr.length; i++){  (maxNum>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+j<childFilterArr.length);){//循环获取最终合并数及finalNext的index和key   finalNextKey = flag?childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent;   finalNextIndex = i+j;   if((key!=finalNextKey&&curNum>1)||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：

 <div 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>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>浙江</td>  <td>这个</td>  <td>西湖区</td>  <td>贤心2</td>  <td>2016-11-29</td>  <td>人生就像是一场修行 B</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>浙江</td>  <td>丽水</td>  <td>莲都区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>浙江</td>  <td>丽水</td>  <td>莲都区</td>  <td>贤心3</td>  <td>2016-19-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>浙江</td>  <td>位置</td>  <td>莲都区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>位置</td>  <td>莲都区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心3</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 B</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 B</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 C</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  <tr>  <td>湖北</td>  <td>这个</td>  <td>1区</td>  <td>贤心</td>  <td>2016-11-30</td>  <td>人生就像是一场修行 D</td>  <td>   <div class="layui-btn-group" >   <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>   </div>  </td>  </tr>  </tbody> </table>  </div>

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数据表格跨行自动合并的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。