列表渲染使用了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', {});
});
~~~
