5. Layui数据表格的快速使用

飘向天边，我们慢慢明白，有些告别，就是最后一面。——《云边有个小卖部》

1.什么是数据表格

用于对表格进行一些列功能和动态化数据操作，比如统计数值, 数据排序

支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格

长这样

2.方法渲染

是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

<table id="demo" lay-filter="test"></table>

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});

3.自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

1. 带有 class=“layui-table” 的 <table> 标签。
2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
3. 在<th> 标签中设置属性lay-data=""用于配置表头信息
   按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。

比如:

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th> 
      <th lay-data="{field:'sign'}">签名</th>      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr></thead></table>

4.把静态表格转换为动态

如果页面已经存在了一段有内容的表格，它由原始的table标签组成，如果需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？

就在 th 标签中加上 lay-data=“” 属性

比如:

<table lay-filter="demo"><thead><tr>
      <th lay-data="{field:'username', width:100}">昵称</th>
      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
      <th lay-data="{field:'sign'}">签名</th></tr></thead>
  <tbody><tr>
      <td>小阿宁的猫猫</td>
      <td>66</td>
      <td>白茶清欢无别事</td>
    </tr></tbody></table>