layui多行合并

样例

js代码

layui框架代码

table.render({elem: '#LAY_table_user', url: 'json/p-mulu-table.json', cols: [[{field: 'a', title: '序号'}, {field: 'b', title: '应用场景'}, {field: 'c', title: '指标名称'}, {field: 'd', title: '定义描述'}]], id: 'testReload',done:function(res,curr,count){layuiRowspan('a',1);layuiRowspan(['b','c','d'],1);//支持数组layuiRowspan("8",1,true);}

done回调函数为新增代码；调用函数如下
长篇代码预警！！

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的tdfor(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;//获取其下第一个不合并单元格的indexlet 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和keyfinalNextKey = 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);}}

复制到本地即可用。

加油加油加油！

layui多行合并，附示例代码相关推荐

怎么把竖列中的数相加python_关于python中pandas.DataFrame对行与列求和及添加新行与列示例代码...
pandas是python环境下最有名的数据统计包,而DataFrame翻译为数据框,是一种数据组织方式,这篇文章主要给大家介绍了关于python中pandas.DataFrame对行与列求和及添加新 ...
如何实现在Windows上运行Linux程序，附示例代码
如何实现在Windows上运行Linux程序,附示例代码微软在去年发布了Bash On Windows, 这项技术允许在Windows上运行Linux程序, 我相信已经有很多文章解释过Bash On ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...
OpenCV4中有哪些视频背景/前景分割(背景建模/前景提取)算法的类,它们各自的算法原理、特点是什么,并附示例代码
关于OpenCV4中有哪些视频背景/前景分割(背景建模/前景提取)算法的类,汇总如下: 上面的汇总不仅显示了OpenCV4中有哪些视频背景/前景分割(背景建模/前景提取)算法的类,还显示了它们的继承. ...
layui表格行合并
先看一下最终合并之后的效果,能对单选.复选框进行按照某一列的合并. 最开始的解决方案来自于这篇博客介绍的方法:https://blog.csdn.net/guishifoxin/article/det ...
python基础代码事例-数据科学Python基础（附示例代码和练习题目）
翻译 | AI科技大本营参与 | 王珂凝审校 | reason_W [AI科技大本营导读]Python的强大和灵活相信已经毋庸置疑了.那么数据科学中,我们又需要掌握哪些基础知识点才能满足使用需求呢 ...
Android中集成Jpush实现推送消息通知与根据别名指定推送附示例代码下载
场景经常会有后台服务向Android推送消息通知的情况. 实现首先在Android Studio中新建一个Android应用在Project根目录的build.gradle中配置了jcenter ...
Jquery中使用table2excel插件实现将Html的table导出为Excel(附示例代码和资源下载)
场景 jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件. 效果在Html中有一个表格点击导出按钮将其导出后注: 博客: htt ...
java小程序详解_微信小程序登录Java后台接口(详解,附示例代码)
首先看一下官方文档地址:微信小程序官方文档API登录接口我们先对官方给的时序图进行简单的分析 1.当小程序调用wx.login()时,会获得一个code(临时登录凭证),然后我们需要用wx.req ...

layui多行合并，附示例代码

layui多行合并

js代码

layui多行合并，附示例代码相关推荐

最新文章

热门文章