Layui Table 自动合并行

使用步骤：1. 引入函数，2. table添加done，3. 行添加merge属性

合并函数

function merge(myTable) {var tableBox = $(myTable.elem).next().children('.layui-table-box'),$main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),$fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),$fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),cols = myTable.cols[0], mergeRecord = {};for (let i = 0; i < cols.length; i++) {var item3 = cols[i], field=item3.field;if (item3.merge) {var mergeField = [field];if (item3.merge !== true) {if (typeof item3.merge == 'string') {mergeField = [item3.merge]} else {mergeField = item3.merge}}mergeRecord[i] = {mergeField: mergeField, rowspan:1}}}$main.each(function (i) {for (var item in mergeRecord) {if (i==$main.length-1 || isMaster(i, item)) {$(this).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');$fixLeft.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');$fixRight.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');mergeRecord[item].rowspan = 1;} else {$(this).children('[data-key$="-'+item+'"]').remove();$fixLeft.eq(i).children('[data-key$="-'+item+'"]').remove();$fixRight.eq(i).children('[data-key$="-'+item+'"]').remove();mergeRecord[item].rowspan +=1;}}})function isMaster (index, item) {var mergeField = mergeRecord[item].mergeField;var dataLength = layui.table.cache[myTable.id].length;for (var i=0; i<mergeField.length; i++) {if (layui.table.cache[myTable.id][dataLength-2-index][mergeField[i]]!== layui.table.cache[myTable.id][dataLength-1-index][mergeField[i]]) {return true;}}return false;}}

使用

 layui.table.render({elem: '#table',height: 312,page: true //开启分页, cols:  [[ //标题栏{field: 'u', title: '名称', width: 190, merge:true} //rowspan即纵向跨越的单元格数,{field: 'r', title: '名称', width: 160, merge: true},{field: 'ra', title: '名称',width: 200},{field: 'ca',title: '状态', width: 90},{field: 'rea', title: '原因'}//colspan即横跨的单元格数，这种情况下不用设置field和width]],done: function () {merge(this);},data: [{'u':'a','r':['b','C'],'ra':'c','ca':'d','rea':'e'},{'u':'a','r':'b1','ra':'c1','ca':'d1','rea':'e1'},]});

Layui Table 自动合并行相关推荐

antd Table合并行 rowSpan
实现这种效果,同一种知识点类型合并行. <Tablecolumns={columns}// dataSource={dataSource}dataSource={createNewArr(dat ...
table html 合并列,html table上下行合并
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
php layui table,layui table 相关问题汇总
1.表格内容自动换行完美解决默认情况下,layui table表格内容超出表格宽度会自动省略号隐藏需要鼠标放到单元格上,出现次图标然后再点击,才会显示全部,用起来不方便解决方法: 未页面添加c ...
layui table 设置滚动条
table设置一下高度,就会自动出现滚动条: table.render({ elem: '#jqGrid' ,height: 420 <!DOCT ...
java合并sheet行_java poi Excel循环合并行
//Java poi 实现循环合并行,还是第一次遇到这种问题 //在网上查了很多资料,都不是自己想要的 //以下为自己研究后,写的一点东西,给大家分享,希望对大家能有思路上的启发,也希望大家能提出宝贵 ...
layui table 表头合并_LayUI Table复杂表头实现
LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...
Ant Design之表格动态合并行
在web开发中,表格的行合并是一个很常见的需求.antd也提供了这种功能,但是文档中的示例代码却和我想象中的相差甚远,如下所示,它是通过一种很笨的办法实现的行合并.这样当表格的数据源是动态获取的,我们 ...
layuiAdmin以及layui table根据http状态码判断授权
需求 layui支持http状态码 layuiAdmin前后端分离项目中所有请求都必须在header中携带token进行鉴权,鉴权不通过时返回http401状态码重新登录,而layui提供的方法不能判 ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

Layui Table 自动合并行

Layui Table 自动合并行

合并函数

使用

Layui Table 自动合并行相关推荐

最新文章

热门文章