给 layui-table 注入点灵魂
扩展功能
表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 三、后台筛选)
拖动列调整顺序、隐藏显示列
excel导出(根据筛选条件和列顺序导出)
子表(表中表、无限层级、子表同样支持前3个功能)
5.拖动行
6.右击快捷菜单
7.合计栏支持固定列
8.双击自适应列宽
9.右侧固定列 列宽拖动改到单元格左侧
效果
1.表头筛选效果
2.编辑筛选效果
筛选明代姓张的 或 唐代姓李的的诗词
3.拖动列调整顺序、隐藏显示列
左右拖动调整顺序,鼠标移出表格后松开--快速隐藏列
4.子表
快速上手
1.将下面模块放到自己项目中:
soulTable.js 总入口
tableFilter.js 表头筛选
excel.js excel导出
tableChild.js 子表 可单独使用
tableMerge.js 单元格合并 可单独使用
源码版位置:ext
压缩版位置:docs/ext
2.定义入口模块soulTable
// 自定义模块,这里只需要开放soulTable即可
layui.config({
base: 'ext/', // 模块目录
}).extend({
soulTable: 'soulTable' // 模块别名
});
3.引入 soulTable.css 到自己项目中。(在项目根目录可找到)
4.在 table.render() 中使用。
①done 中加入 soulTable.render(this)
②在需要下拉筛选的列中加入 filter: true 即可生效
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)
}
});
详细介绍
一、支持使用的几种情况
demo 中都有示例
前端不分页
即 page:false
注意:layui框架有个bug,可以给 limit 极限值,如 limit:1000000 来兼容这个bug
如果不想这么干想要直接修改 table.js 修复这个问题,可以私信我
前端分页
即 url为空,page: true
后台分页
即 url: xxxxx, page: true
由于前两种筛选都是在前端完成,所以可以直接使用,但是 后台分页的情况下,前台数据是不完整,所以需要后台支持
java 的 mybatis 拦截器我已经做了,支持 mysql、oracle 数据库。所以如果你后台是 java, 且使用了mybatis作为持久层框架,那么恭喜你可以移步这里来集成。<