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

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

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

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

soulTable.js：总入口tableFilter.js：表头筛选excel.js：excel导出tableChild.js：子表 可单独使用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提供了非常丰富的使用说明文档，有需要的可以去看看哈。

# 预览地址 仓库地址

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