table 数据表格文档 - layui.table
table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。
上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式。下面就是它对应的代码：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>table模块快速使用</title>
- <link rel="stylesheet" href="/layui/css/layui.css" media="all">
- </head>
- <body>
-
- <table id="demo" lay-filter="test"></table>
-
- <script src="/layui/layui.js"></script>
- <script>
- layui.use('table', function(){
- var table = layui.table;
-
- //第一个实例
- table.render({
- elem: '#demo'
- ,height: 312
- ,url: '/demo/table/user/' //数据接口
- ,page: true //开启分页
- ,cols: [[ //表头
- {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
- ,{field: 'username', title: '用户名', width:80}
- ,{field: 'sex', title: '性别', width:80, sort: true}
- ,{field: 'city', title: '城市', width:80}
- ,{field: 'sign', title: '签名', width: 177}
- ,{field: 'experience', title: '积分', width: 80, sort: true}
- ,{field: 'score', title: '评分', width: 80, sort: true}
- ,{field: 'classify', title: '职业', width: 80}
- ,{field: 'wealth', title: '财富', width: 135, sort: true}
- ]]
- });
-
- });
- </script>
- </body>
- </html>
