列表渲染使用了layui的模板引擎，所以不了解模板引擎的，请移步到[layui官方文档](http://www.layui.com/doc/modules/laytpl.html)了解。下面以article.html来说明。
列表的渲染就是通过配置好的param参数异步请求
模板是放在一个script标签中的，这里需要填写ID与data-params属性，script标签的内容就是列表的排版的html代码，**特别声名：此处模板所有的数据都是通过js控制，写后端语言是无效的（之前就有人这么干，我直接是吐血了）**，代码如下
~~~
<script id="list-tpl" type="text/html" data-params='{"url":"/php/data.php","dataName":"articleCatData","pageid":"#page","tableWidth":"2200px"}'>
<table id="example" class="layui-table lay-even" data-name="articleCatData" data-tplid="list-tpl">
<thead>
<tr>
<th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check" lay-skin="primary"></th>
<th width="60">序号</th>
<th>标题</th>
<th>连接</th>
<th width="70">排序</th>
<th width="80">审核</th>
<th width="152">操作</th>
</tr>
</thead>
<tbody>
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td>
<td>{{ item.id}}</td>
<td>{{ item.title}}</td>
<td>{{ item.url}}</td>
<td><input type="text" class="layui-input ajax-blur" name="order" value="{{ item.id}}" data-params='{"url":"/php/test.php","data":"id=1&name=paco","loading":"false"}'> </td>
<td><input type="checkbox" name="switch" lay-skin="switch" lay-text="已审|未审" {{#if (item.switch){ }}checked="checked" {{# } }} lay-filter="ajax" data-params='{"url":"/php/test.php","confirm":"true","data":"id={{ item.id}}&name=paco","complete":"test"}'> </td>
<td>
<button class="layui-btn layui-btn-mini modal-iframe" data-params='{"content": "article-add.html", "title": "{{item.title}}","full":"true"}'>
<i class="iconfont"></i>编辑
</button>
<button class="layui-btn layui-btn-mini layui-btn-danger ajax" data-params='{"url": "/php/test.php","confirm":"true","data":"id=1&name=ni"}'>
<i class="iconfont"></i>删除
</button></td>
</td>
</tr>
{{# }); }}
</tbody>
</table>
</script>
~~~
#### data-params参数列表
| 参数 | 默认值 | 说明 |
| -------- | -------- | --------------- |
| method | get | ajax类型 |
| dataType | json | 服务器返回数据类型 |
| data | | 请求的参数 |
| url | | 请求数据的服务端地址URL |
| tplid | list-tpl | 模板的ID |
| listid | list | 视图ID |
| pageid | | 分页视图id,如果留空则不分页 |
| curr | 1 | 当前 |
| pages | 0 | 总页数，通过服务端获取 |
| dataName | | 用于缓存数据的名称，必须填写，请求成功将用此值为数据缓存的名称 |
|tableWidth| |这个是列表的宽度设置，用于移动端。如果为空，则根据tr的高度自动计算表格宽度|
** 代码中的table有两上属性必须填写 data-name="articleCatData" data-tplid="list-tpl"**
data-name="articleCatData" 用于渲染列表时定位缓存数据
data-tplid="list-tpl" 用于渲染列表时定位模板
实例代码如下，url中可以带上参数，但建议统一写在data值里
~~~html
data-params='{"url":"/php/data.php","pageid":"#page","tableWidth":"2200px"}'
~~~
#### 列表中动态赋值
~~~html
<button class="layui-btn layui-btn-mini modal-iframe" data-params='{"content": "article-add.html", "title": "{{item.title}}","full":"true"}'>
<i class="iconfont"></i>编辑
</button>
~~~
使用模板的{{}}格式便可动态的写入了，如上面的 "title": "{{item.title}}"，注意双引号的使用
#### 列表中使判断复选框选中
~~~html
<input type="checkbox" name="switch" lay-skin="switch" lay-text="已审|未审" {{#if (item.switch){ }}checked="checked" {{# } }} lay-filter="ajax" data-params='{"url":"/php/test.php","confirm":"true","data":"id={{ item.id}}&name=paco","complete":"test"}'>
~~~
使用{{# }}来使用原生的js，这样就可以根据值来判断复选框是否选中了，下面代码就是根据变量switch来给checkbox实现选中
~~~
{{#if (item.switch){ }}checked="checked" {{# } }}
~~~
下面这部份代码结合使用了ajax模块，实现了异步更新
~~~html
lay-filter="ajax" data-params='{"url":"/php/test.php","confirm":"true","data":"id={{ item.id}}&name=paco","complete":"test"}'
~~~
#### 列表中使用自定义方法
列表中使用{{}}调用
~~~html
{{ strRepeat(' ',item.id)}}
~~~
方法需定义成全局的方法，也就是在script内里面直接写上方法
~~~script
<script>
function strRepeat(str, count) {
var ret = "";
for (var i = 0; i < count; i++) {
ret += str;
}
return ret;
}
</script>
~~~
#### 定义视图
用于呈现渲染结果，记得定义好ID。注：列表视图添加class="layui-form"是为了渲染列表中的表单元素
~~~html
列表视图
<div id="list" class="layui-form"></div>
分页视图
<div class="text-right" id="page"></div>
~~~
#### 初始化列表
引入dtable模块，并new一个dtable实例，有多个列表就new多个，初始化的参数为模板的ID，如果使用的是模板现成的，则跳过此步
~~~javascript
layui.define(['jquery', 'dtable'], function(exports) {
var $ = layui.jquery,
list = layui.dtable；
oneList = new list();
oneList.init('list-tpl');
exports('list', {});
});
~~~
