Layui：数据表格的渲染

	方式	机制	适用场景
1	方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
2	自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
3	转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

• 方法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

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

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
});
//备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

• 自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需写初始的渲染方法

//带有 class="layui-table" 的 <table> 标签。
//对标签设置属性 lay-data="" 用于配置一些基础参数
//在 <th> 标签中设置属性lay-data=""用于配置表头信息
<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', 80, sort: true}">ID</th>
      <th lay-data="{field:'username', 80}">用户名</th>
      <th lay-data="{field:'sex', 80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</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>

• 转换静态表格

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