上次做table有些東西 忘記了 這次當作來個分析總結一下 跟大家共同學習
閑話不多說 直接上例子 
代碼：
<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>
<script>
//*********************************layuitable初始化代碼**********************************
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/GetDataForLayuiTableLearning.ashx' //數據接口
, page: true //開啟分頁
, cols: [[ //表頭
{ field: 'ID', title: 'ID', sort: true, unresize: true }
, { field: 'starttime', title: '開始時間', unresize: true}
, { field: 'addtime', title: '添加時間', unresize: true }
, { field: 'DeScore', title: '得分', unresize: true }
]]
});
});
//*********************************layuitable初始化代碼**********************************
</script>
第一個表格完成了 但是可以看到時間格式多了一個很奇怪的T 原因是微軟默認json化的datetime格式 所以后台做小小改動就ok
后台代碼處理時間格式帶有T的問題
IsoDateTimeConverter iso = new IsoDateTimeConverter();
iso.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
var ajson = JsonConvert.SerializeObject(dt, iso);
JArray jar = JArray.Parse(ajson);
ok 看效果
接下來介紹幾個比較常用的table參數。
第一個：toolbar參數 開啟表格頭部工具欄區域 （綁定列工具條） 官網解釋：通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數就是為此而生，你因此可以非常便捷地實現各種操作功能。
html代碼：
<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>
<script>
//*********************************layuitable初始化代碼**********************************
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/GetDataForLayuiTableLearning.ashx' //數據接口
, page: true //開啟分頁
, cols: [[ //表頭
{ field: 'ID', title: 'ID', sort: true, unresize: true }
, { field: 'starttime', title: '開始時間', unresize: true }
, { field: 'addtime', title: '添加時間', unresize: true }
, { field: 'DeScore', title: '得分', unresize: true }
, { align: 'center',title: '操作', toolbar: '#barDemo' }
]]
});
});
//*********************************layuitable初始化代碼**********************************
</script>
<script type="text/html" id="barDemo">
<%-- *********************************工具欄綁定代碼**********************************--%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
<%-- *********************************工具欄綁定代碼**********************************--%>
</script>重點在於首先聲明一個列，用來作為工具列的列名： , { align: 'center',title: '操作', toolbar: '#barDemo' } 列名為操作
然后 再script html代碼中 為我們的toobar列給定造型和樣式：
<script type="text/html" id="barDemo">
<%-- *********************************工具欄綁定代碼**********************************--%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
<%-- *********************************工具欄綁定代碼**********************************--%>
</script>
效果如下：
接下來我們看看toorbar如何 實現操作的。
直接上代碼：
table.on('tool(test)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
if (layEvent === 'detail') { //查看
layer.msg("您點擊了查看按鈕！",{time: 5000})
} else if (layEvent === 'del') { //刪除
layer.confirm('真的刪除行么', function (index) {
layer.msg("您選擇了刪除！",{time: 5000});
});
} else if (layEvent === 'edit') { //編輯
layer.msg("您選擇了編輯按鈕！",{time: 5000})
}
});
tableon加上工具條 注意 注意 注意 這里table.on('tool(test)'綁定的這個test是指table的lay-filter="test" 然后 你在相應的位置（我彈出消息的位置寫上你相應的操作代碼就完成了）
接下來看效果
點擊查看：
點擊編輯：
點擊刪除：
每一行所有你想獲取的數據都可以獲得 只要后台返回了 即使你沒有在列中顯示他 你也可以得到 現在我們去掉得分這一列
點擊編輯 依然可以得到積分
假如要對積分進行 區分 比如什么 普通會員 黃金會員 磚石會員 白金會員 等 看操作
代碼：
<%-- ********************************列數據顯示做顯示改變***********************************--%>
<script type="text/html" id="DeScore">
{{# if(d.DeScore < 10){ }}
積分：{{d.DeScore}}-- 普通會員
{{# } else { }}
積分：{{d.DeScore}}--黃金會員
{{# } }}
</script>
<%-- ********************************列數據顯示做顯示改變***********************************--%>
基本都寫完了 其它就是是一個我們對表格的搜索功能了 和表格的重載放一起講了 這是同一個功能
function searcha() {
var data = {
score: $("#score").val()
}
layui.table.reload("demo", { where: data });
}
表格重載的寫法 則例的where是除了limit 和page以為的參數（limit 和page layui默認會傳入 10 和1）
前台：
<div class="layui-form-item">
<label class="layui-form-label">積分</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" class="layui-input" id="score">
</div>
</div>
可以看到score已經傳入后台了 后台sql做相應查詢就ok了