layui数据表格跨行自动合并的例子资源-CSDN下载

112 浏览量 2020-12-10 22:40:25 上传评论收藏 85KB PDF 举报

资源推荐

资源详情

资源评论

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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38612648

粉丝: 12

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip