本篇文章给大家带来的内容是关于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 = 9999; for(let i = 0; i < childFilterArr.length; i++){ maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):maxNum; let key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent; let tdNum = childFilterTextObj[key]; let curNum = maxNum1){ canRowspan = true; curNum = j; } } if(canRowspan){ childFilterArr[i].setAttribute("rowspan",curNum); if($(childFilterArr[i]).find("p.rowspan").length>0){//设置td内的p.rowspan高度适应合并后的高度 $(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent"); $(childFilterArr[i]).find("p.layui-table-cell")[0].style.height= curNum*38-10 +"px"; } canRowspan = false; }else{ childFilterArr[i].style.display = "none"; } if(maxNum){ maxNum--; } if(--childFilterTextObj[key]==0||maxNum==0||(nextKey!=undefined&&key!=nextKey)){ 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 使用:
HTML:
省 市 区 昵称 加入时间 签名 基本操作 浙江 杭州 西湖区 贤心1 2016-11-28 人生就像是一场修行 A 浙江 这个 西湖区 贤心2 2016-11-29 人生就像是一场修行 B 浙江 丽水 莲都区 贤心3 2016-11-30 人生就像是一场修行 C 浙江 丽水 莲都区 贤心3 2016-19-30 人生就像是一场修行 C 浙江 位置 莲都区 贤心3 2016-11-30 人生就像是一场修行 C 湖北 位置 莲都区 贤心3 2016-11-30 人生就像是一场修行 C 湖北 这个 1区 贤心3 2016-11-30 人生就像是一场修行 C 湖北 这个 1区 贤心3 2016-11-30 人生就像是一场修行 C 湖北 这个 1区 贤心3 2016-11-30 人生就像是一场修行 B 湖北 这个 1区 贤心 2016-11-30 人生就像是一场修行 B 湖北 这个 1区 贤心 2016-11-30 人生就像是一场修行 C 湖北 这个 1区 贤心 2016-11-30 人生就像是一场修行 D
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数据表格如何实现自动合并(代码)的详细内容。更多信息请关注PHP中文网其他相关文章!