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 %