The layui-table-merge from githubasural

githubasural / layui-table-merge Goto Github PK

View Code? Open in Web Editor NEW

为 layui 扩展的表格列自动合并

HTML 1.74% CSS 23.03% JavaScript 75.22%

layui-table-merge's Introduction

为 layui 扩展的表格列自动合并

当前 layui 版本为 2.3.0

在线demo： http://yelog.org/layui-table-merge/
这个在线 demo就是本项目的 index.html。可将项目 clone 到本地查看效果。

效果图

参数说明

属性名	属性值	例子	描述
merge	boolean	merge: true	开启合并，并根据当前列相同值自动合并
	string	merge: 'name'	开启合并，并根据指定列相同值自动合并
	array	merge: ['name', 'type']	开启合并，并先根据 name值分组后，再以 type值相同的合并对应行注：数组无数量限制

使用

替换 table.js 即可使用

想要知道修改了那些代码，可以查看 table.js 提交日志。日志：init: 初始化项目 为引入layui官方代码，后续提交为扩展代码。

使用实例

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}
    ]]
});