微信小程序的小游戏_layui数据表格跨行主动合并的例子

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 
 table id="test" lay-data="{page:true,limit:50}" lay-filter="test" 
 thead 
 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 
 td 浙江 /td 
 td 杭州 /td 
 td 西湖区 /td 
 td 贤心1 /td 
 td  /td 
 td 人生就像是一场修行 A /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 这个 /td 
 td 西湖区 /td 
 td 贤心2 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 丽水 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 丽水 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 位置 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 位置 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 D /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 /tbody 
 /table 
 /div 

layuiRowspan('province',1); layuiRowspan(['city','zone','username','joinTime','sign'],1);//支持数组 layuiRowspan("8",1,true); });})

以上这篇layui数据表格跨行自动合并的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。