.site-h1 {

margin: 0 0 20px 20px;

line-height: 60px;

padding-bottom: 10px;

color: #393D49;

border-bottom: 1px solid #eee;

font-size: 28px;

font-weight: 300;

}

.layui-table tbody tr:hover, .layui-table-hover {

background-color: initial;

}

.site-demo-code {

position: absolute;

left: 0;

width: 100%;

height: 580px;

border: none;

padding: 10px;

resize: none;

font-size: 12px;

background-color: #F7FBFF;

color: #881280;

font-family: Courier New;

}

b {

color: red;

}

.little-code {

font-size: 12px;

background-color: #F7FBFF;

color: #881280;

font-family: Courier New;

}

layui表格列合并

扩展了layui table，可以相同值列合并 。当前使用的layui版本：2.4.5

快速上手

编辑

删除

如何使用

1、将模块 tableMerge.js 引入项目中：

// 自定义模块

layui.config({

base: 'module/'

}).extend({

tableMerge: 'tableMerge'

});

2、点击查看代码有使用示例，当然也可下载源码查看点我到达项目地址

// 自定义模块

layui.config({

base: 'module/'

}).extend({

tableMerge: 'tableMerge'

});

layui.use(['table','element','tableMerge'], function () {

var table = layui.table,

tableMerge = layui.tableMerge;

/**

* 自动合并表格

*/

table.render({

elem: '#mergeTable'

,height: 550

,url: 'data.json'

,limit: 30

,page: true

,cols: [[

{type: 'checkbox', fixed: 'left'}

,{field:'poetry', title:'诗词', width:188, fixed: 'left'}

,{field:'name', merge: true, title:'诗人', width:100, fixed: 'left'} // 根据 当前列 相同值 的自动合并

,{field:'type', merge: ['name','type'], title:'类型', width:100, fixed: 'left'} // 根据 name 分组后，再以 type值 相同的合并对应行

,{field:'type', merge: true, title:'类型', width:100} // 根据 当前列 相同值 的自动合并

,{field:'dynasty', title:'朝代', merge: ['name', 'type'], width:150} // 根据 name 分组后，再以 type值 相同的自动合并

,{field:'dynasty', title:'朝代', merge: 'name', width:150} // 根据 name值 相同的自动合并

,{field:'dynasty', title:'朝代', merge: true, width:150} // 根据 当前列 相同值 的自动合并

,{field:'sentences', title:'名句', width:400}

,{field:'sentences', title:'名句', width:400}

,{field:'sentences', title:'名句', width:400}

,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}

]]

,done: function () {

tableMerge.render(this)

}

});

layui.element.on('tab(change)', function(data){

if (data.index == 1 && layui.$('#originTable').siblings().length==0) { //第一次切换时加载

/**

* 原始表格

*/

table.render({

elem: '#originTable'

,height: 550

,url: 'data.json'

,limit: 30

,page: true

,cols: [[

{type: 'checkbox', fixed: 'left'}

,{field:'poetry', title:'诗词', width:188, fixed: 'left'}

,{field:'name', title:'诗人', width:100, fixed: 'left'}

,{field:'type', title:'类型', width:100, fixed: 'left'}

,{field:'type', title:'类型', width:100}

,{field:'dynasty', title:'朝代', width:150}

,{field:'dynasty', title:'朝代', width:150}

,{field:'dynasty', title:'朝代', width:150}

,{field:'sentences', title:'名句', width:400}

,{field:'sentences', title:'名句', width:400}

,{field:'sentences', title:'名句', width:400}

,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}

]]

});

}

});

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史