1、核心代码:
let tableMerge = layui. tableMerge;
let tableData = [ {
pid : 0 ,
cid : 111 ,
sortNum : 1 ,
pName : '数据父元素1' ,
name : '数据1' ,
val : '20' ,
open : true ,
hasChild : true ,
opt : '数据父元素1' ,
} , {
pid : 111 ,
sortNum : 1 ,
pName : '数据父元素1' ,
cid : '1-1' ,
name : '数据1-1' ,
val : '1' ,
opt : '数据父元素1' ,
open : true ,
hasChild : false ,
} , {
pid : 111 ,
sortNum : 1 ,
pName : '数据父元素1' ,
cid : '1-2' ,
name : '数据1-2' ,
val : '2' ,
opt : '数据父元素1' ,
open : true ,
hasChild : false ,
} , {
pid : 111 ,
sortNum : 1 ,
pName : '数据父元素1' ,
cid : '1-3' ,
name : '数据1-3' ,
val : '3' ,
opt : '数据父元素1' ,
open : true ,
hasChild : false ,
} ,
{
pid : 1 ,
cid : 222 ,
sortNum : 2 ,
pName : '数据父元素2' ,
name : '数据2' ,
val : '200' ,
open : true ,
hasChild : true ,
opt : '数据父元素2' ,
} , {
pid : 222 ,
cid : '2-1' ,
name : '数据2-1' ,
val : '10' ,
sortNum : 2 ,
pName : '数据父元素2' ,
opt : '数据父元素2' ,
open : true ,
hasChild : false ,
} , {
pid : 222 ,
cid : '2-2' ,
name : '数据2-2' ,
val : '20' ,
sortNum : 2 ,
pName : '数据父元素2' ,
opt : '数据父元素2' ,
open : true ,
hasChild : false ,
} , {
pid : 222 ,
cid : '2-3' ,
name : '数据2-3' ,
val : '30' ,
sortNum : 2 ,
pName : '数据父元素2' ,
opt : '数据父元素2' ,
open : true ,
hasChild : false ,
} , {
pid : 222 ,
cid : '1-4' ,
name : '数据2-4' ,
val : '40' ,
sortNum : 2 ,
pName : '数据父元素2' ,
opt : '数据父元素2' ,
open : true ,
hasChild : false ,
} ]
var tableRender = function ( ) {
table. render ( {
id : 'tableId' ,
tree : {
iconIndex : 3 ,
isPidData : true ,
idName : 'cid' ,
pidName : 'pid' ,
openName : 'open' ,
getIcon : function ( d ) {
return ''
}
} ,
elem : '#tableId' ,
page : false
, limit : 100
, cols : [ [
{ field : "cid" , hide : true } ,
{
field : "sortNum" , title : "序号" , align : "center" , width : 80 , merge : true ,
templet : function ( item ) {
return item. sortNum ? '<span style="color:#1E9FFF">' + item. sortNum + '</span>' : ''
}
} ,
{ field : "pName" , title : "名称" , align : "center" , width : 250 , merge : true , } ,
{ field : "name" , title : "结构" , align : "left" , width : 250 , templet : function ( item ) {
if ( item. hasChild) {
return `
${ ! item. open? '<i class="layui-icon layui-icon-triangle-r" lay-event="fold_r"></i>' : '<i class="layui-icon layui-icon-triangle-d" lay-event="fold_d"></i>' }
${ item. name} ` ;
} else {
return ` <div style="padding-left: 20px;"> ${ item. open? item. name: '' } </div> `
}
}
} ,
{
field : "val" , title : "数据" , align : "center" , width : 150 , templet : function ( item ) {
return item. val
}
} ,
{
field : "opt" , title : "操作" , align : "center" , merge : true , templet : function ( item ) {
return item. sortNum ? '<div style = "color:#01AAED;cursor: pointer" lay-event="navToEchartTanChuang">详情</div>' : ''
}
}
] ,
] ,
data : tableData,
done : function ( ) {
tableMerge. render ( this )
} ,
event : true
} ) } ;
2、效果图:
3、tableMerge源码:
layui. define ( [ 'table' ] , function ( exports ) {
var $ = layui. jquery;
var mod = {
render : function ( myTable ) {
var tableBox = $ ( '#' + myTable. id) . 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 ( var 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) ;
$fixLeft. eq ( i) . children ( '[data-key$="-' + item+ '"]' ) . attr ( 'rowspan' , mergeRecord[ item] . rowspan) ;
$fixRight. eq ( i) . children ( '[data-key$="-' + item+ '"]' ) . attr ( 'rowspan' , mergeRecord[ item] . rowspan) ;
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 ;
}
}
} ;
exports ( 'tableMerge' , mod) ;
} ) ;