本篇文章给大家带来的内容是关于layui数据表格如何实现自动合并（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
需求描述：
在数据表格中，对于按某个分类展示数据其分类下又有多个细分的嵌套细分项，如省市区昵称，省下面有多个市，市下面有多个区，区下面有昵称，需要实现跨行合并，且操作按钮以分类为单位（即操作按钮需按照分类合并）。
需求分析：
除操作列外，以左边列为基础单位进行跨行合并，当前单元格合并数
操作列可以选择任意列作为基础单位（这个待完善）。
原始页面：
处理页面：
通用产品企业网站(.NET2.0)1.0
下载
1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用
方法：
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);
}
});})相关推荐：
