README.md

为 layui 扩展的 表格列自动合并[独立模块版]

当前 layui 版本为 2.4.5

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

效果图

效果

参数说明

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

引入

引入 tableMerge 模块即可

// 自定义模块
layui.config({
    base: 'module/'
}).extend({
    tableMerge: '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)
    }
});

更多内容参考实例或代码。

项目简介

🚀 Github 镜像仓库 🚀

源项目地址

https://github.com/yelog/layui-table-merge

发行版本

当前项目没有发行版本

贡献者 1

开发语言

  • JavaScript 76.7 %
  • CSS 21.6 %
  • HTML 1.6 %