layui數(shù)據(jù)表格跨行自動(dòng)合并的例子
需求描述:
在數(shù)據(jù)表格中,對(duì)于按某個(gè)分類(lèi)展示數(shù)據(jù)其分類(lèi)下又有多個(gè)細(xì)分的嵌套細(xì)分項(xiàng),如省市區(qū)昵稱(chēng),省下面有多個(gè)市,市下面有多個(gè)區(qū),區(qū)下面有昵稱(chēng),需要實(shí)現(xiàn)跨行合并,且操作按鈕以分類(lèi)為單位(即操作按鈕需按照分類(lèi)合并)。
需求分析:
除操作列外,以左邊列為基礎(chǔ)單位進(jìn)行跨行合并,當(dāng)前單元格合并數(shù)<=左邊列;
操作列可以選擇任意列作為基礎(chǔ)單位(這個(gè)待完善)。
原始頁(yè)面:
處理頁(yè)面:
方法:
var execRowspan = function(fieldName,index,flag){ // 1為不凍結(jié)的情況,左側(cè)列為凍結(jié)的情況 let fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l")); // 左側(cè)導(dǎo)航欄不凍結(jié)的情況 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的個(gè)數(shù)和種類(lèi) 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;//以前列單元格為基礎(chǔ)獲取的最大合并數(shù) let finalNextIndex;//獲取其下第一個(gè)不合并單元格的index let finalNextKey;//獲取其下第一個(gè)不合并單元格的值 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;//獲取下一個(gè)單元格的值 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);){//循環(huán)獲取最終合并數(shù)及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){//設(shè)置td內(nèi)的div.rowspan高度適應(yīng)合并后的高度 $(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; } } } //合并數(shù)據(jù)表格行 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}">區(qū)</th> <th lay-data="{field:'username', width:200}">昵稱(chēng)</th> <th lay-data="{field:'joinTime', width:150}">加入時(shí)間</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>西湖區(qū)</td> <td>賢心1</td> <td>2016-11-28</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>西湖區(qū)</td> <td>賢心2</td> <td>2016-11-29</td> <td>人生就像是一場(chǎng)修行 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>蓮都區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>蓮都區(qū)</td> <td>賢心3</td> <td>2016-19-30</td> <td>人生就像是一場(chǎng)修行 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>蓮都區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>蓮都區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心3</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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>這個(gè)</td> <td>1區(qū)</td> <td>賢心</td> <td>2016-11-30</td> <td>人生就像是一場(chǎng)修行 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);//支持?jǐn)?shù)組 layuiRowspan("8",1,true); } });})
以上這篇layui數(shù)據(jù)表格跨行自動(dòng)合并的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript實(shí)現(xiàn)視頻輪播在pc端與移動(dòng)端均可
用Javascript實(shí)現(xiàn)視頻輪播,畢竟是客戶(hù)的需求嗎?所以盡量實(shí)現(xiàn)下,下面有個(gè)實(shí)現(xiàn)視頻輪播的示例,pc端與移動(dòng)端均可以實(shí)現(xiàn),感興趣的朋友可以了解下2013-09-09JavaScript中發(fā)出HTTP請(qǐng)求最常用的方法
JavaScript具有很好的模塊和方法來(lái)發(fā)送可用于從服務(wù)器端資源發(fā)送或接收數(shù)據(jù)的HTTP請(qǐng)求。這篇文章主要介紹了JavaScript中發(fā)出HTTP請(qǐng)求最常用的方法,需要的朋友可以參考下2018-07-07Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項(xiàng)目中用到了一款帶輪播組件,功能非常齊全,可以設(shè)置各種標(biāo)題樣式、動(dòng)畫(huà)效果、輪播時(shí)間、開(kāi)始暫停等功能,下面小編通過(guò)本文給大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程,需要的朋友參考下吧2016-11-11JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法
這篇文章主要介紹了JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06動(dòng)態(tài)的創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素
本文用示例為大家介紹下動(dòng)態(tài)創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素,感興趣的朋友可以參考下2014-01-01詳解ES6 Promise對(duì)象then方法鏈?zhǔn)秸{(diào)用
這篇文章主要介紹了詳解ES6 Promise對(duì)象then方法鏈?zhǔn)秸{(diào)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Javascript 淺拷貝、深拷貝的實(shí)現(xiàn)代碼
Javascript中的對(duì)像賦值與Java中是一樣的,都為引用傳遞.就是說(shuō),在把一個(gè)對(duì)像賦值給一個(gè)變量時(shí),那么這個(gè)變量所指向的仍就是原來(lái)對(duì)像的地址.那怎么來(lái)做呢 答案是克隆.2008-12-12