1. table 数据表格文档
1.三种初始化渲染方式
方式 | 机制 | 适用场景 | |
---|---|---|---|
01. | 方法渲染 | 用JS方法的配置完成渲染 | (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。 |
02. | 自动渲染 | HTML配置,自动渲染 | 无需写过多 JS,可专注于 HTML 表头部分 |
03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可 |
1.方法渲染
<table id="demo" lay-filter="test"></table> <script> layui.use('table',function(){ var table = layui.table; //第一个实例 table.render({ elem:'#demo', //table的id height:300, url:'js/user.json', 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} ]] }); }); </script>
2.自动渲染
所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点:
- 带有 class="layui-table" 的 标签。
- 对标签设置属性 lay-data="" 用于配置一些基础参数