今天给大家分享一个挺不错的Web多功能扩展表格组件LayuiSoulTable。

layui-soul-table 基于layui风格的table扩展表格组件。提供了超过40+功能。

功能特性

• 表头筛选、自定义条件（支持前端筛选、后台筛选）
• 拖动列调整顺序、隐藏显示列
• excel导出（根据筛选条件和列顺序导出）
• 子表（表中表、无限层级、子表同样支持前3个功能）
• 拖动行
• 右击快捷菜单
• 合计栏支持固定列、固定列支持滚动
• 双击自适应列宽
• 右侧固定列 列宽拖动改到单元格左侧

快速开发

将下列模块导入到项目中。

1. soulTable.js：总入口
2. tableFilter.js：表头筛选
3. excel.js：excel导出
4. tableChild.js：子表 可单独使用
5. tableMerge.js：单元格合并 可单独使用

引入使用

// 自定义模块，这里只需要开放soulTable即可
layui.config({
    base: 'ext/',   // 模块目录
}).extend({                         
    soulTable: 'soulTable'  // 模块别名
})

table.render({
    elem: '#myTable'
    ,height: $(document).height() - $('#myTable').offset().top - 20
    ,limit: 20
    ,page: true
    ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'poetry', title:'诗词', width:188, filter:true, sort: true}
        ,{field:'name',  title:'诗人', width:100, filter:true, sort: true}
        ,{field:'type', title:'类型', width:100, filter:true}
        ,{field:'dynasty', title:'朝代',  width:150, filter:true}
        ,{field:'sentences', title:'名句', width:400, filter:true}
        ,{title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,done: function () {
        soulTable.render(this)
    }
})

layui-soul-table提供了非常丰富的使用说明文档，有需要的可以去看看哈。

# 预览地址
https://saodiyang.gitee.io/layui-soul-table/

# 仓库地址
https://gitee.com/saodiyang/layui-soul-table

好了，今天就分享到这里。如果web项目有需要table功能，不妨可以试一试。