今天给大家分享一个挺不错的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提供了非常丰富的使用说明文档，有需要的可以去看看哈。
# 预览地址
https://saodiyang.gitee.io/layui-soul-table/
# 仓库地址
https://gitee.com/saodiyang/layui-soul-table
好了，今天就分享到这里。如果web项目有需要table功能，不妨可以试一试。
