layui根据条件显示列_layui-soul-table

给 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作为持久层框架，那么恭喜你可以移步这里来集成。<