需求描述：
在數據表格中，對于按某個分類展示數據其分類下又有多個細分的嵌套細分項，如省市區昵稱，省下面有多個市，市下面有多個區，區下面有昵稱，需要實現跨行合并，且操作按鈕以分類為單位（即操作按鈕需按照分類合并）。
需求分析：
除操作列外，以左邊列為基礎單位進行跨行合并，當前單元格合并數<=左邊列；
操作列可以選擇任意列作為基礎單位（這個待完善）。
原始頁面：
處理頁面：
方法：
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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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" 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> </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數據表格跨行自動合并的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
