最近想把項目用layui來做，研究了下並記錄下來，數據源這個案例放到了new1.json文件中，使用layui框架返回的數據必須按照他們的格式，否則會報請求數據錯誤。
先上一張展示圖：
效果還是很好看的，看下如何實現的吧
1、首先做個准備資源
這里主要下載layui文件，因為需要用到其中的layui.css與layui.js這兩個文件。
<link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"></script> <!--這里要改成自己的資源路徑-->
2、body部分只需要加入<table>標簽，若想在行的尾部加上編輯|修改其他操作，這里還需要添加<script>組件（也是沒看懂，照着做吧），如
<body> <table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary 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> </body>
3、下面就是js部分（重點）
3-1、預先加載
layui.use('table', function() {
var table = layui.table; //表格
}
這里采用layui.use(mods,callback)方法來實現預先加載，本次案例只使用表格，如還有其他的，如：日期、輪播、上傳等多個模塊，就要使用數組，代碼是這樣的
layui.use(['laydate', 'laypage', 'table', 'carousel', 'upload', 'element'], function() {
var laydate = layui.laydate, //日期
laypage = layui.laypage, //分頁
table = layui.table, //表格
carousel = layui.carousel, //輪播
upload = layui.upload, //上傳
element = layui.element //元素操作
}
接下來在對每個模塊執行如監聽事件：
//監聽 頭 工具欄事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id),
data = checkStatus.data; //獲取選中的數據
switch(obj.event) {
case 'add':
layer.msg('添加');
break;
case 'update':
if(data.length === 0) {
layer.msg('請選擇一行');
} else if(data.length > 1) {
layer.msg('只能同時編輯一個');
} else {
layer.alert('編輯 [id]：' + checkStatus.data[0].id);
}
break;
case 'delete':
if(data.length === 0) {
layer.msg('請選擇一行');
} else {
layer.msg('刪除');
}
break;
};
});
3-2、對表格進行渲染 table.render()方法
//執行一個 table 實例
table.render({
elem: '#demo',
height: 600,
url: 'new.json',//數據接口
title: '用戶表',
page: true, //開啟分頁
toolbar: 'default' ,//開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔,
totalRow: true ,//開啟合計行
cols: [//表頭
[
{ type: 'checkbox', fixed: 'left' },
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: 'username', title: '用戶名', width: 80 },
{ field: 'sex', title: '性別', width: 80, sort: true },
{ field: 'city', title: '城市', width: 80 },
{ field: 'sign', title: '簽名', width: 177 },
{ field: 'experience', title: '積分', width: 80, sort: true },
{ field: 'score', title: '評分', width: 80, sort: true },
{ field: 'classify', title: '職業', width: 80 },
{ field: 'wealth', title: '財富', width: 135, sort: true },
{ fixed: 'right', width: 378, align: 'center', toolbar: '#barDemo' }
]
]
});
這里含有許多參數，詳解請看layui官方文檔，這里就不做詳細介紹了，提醒的是，
設置表頭時，field:'屬性名'，若是后台要與類的屬性名一一對應。
3-3、這里的url請求的數據接口，沒有從后台獲取，這里給的json格式的文件
new1.json
{ "code": 0, "msg": "", "count": 100, "data": [ { "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "簽名-0", "experience": 255, "logins": 24, "wealth": 82830700, "classify": "作家", "score": 57 }, { "id": 10001, "username": "user-1", "sex": "男", "city": "城市-1", "sign": "簽名-1", "experience": 884, "logins": 58, "wealth": 64928690, "classify": "詞人", "score": 27 }, { "id": 10002, "username": "user-2", "sex": "女", "city": "城市-2", "sign": "簽名-2", "experience": 650, "logins": 77, "wealth": 6298078, "classify": "醬油", "score": 31 }, { "id": 10003, "username": "user-3", "sex": "女", "city": "城市-3", "sign": "簽名-3", "experience": 362, "logins": 157, "wealth": 37117017, "classify": "詩人", "score": 68 }, { "id": 10004, "username": "user-4", "sex": "男", "city": "城市-4", "sign": "簽名-4", "experience": 807, "logins": 51, "wealth": 76263262, "classify": "作家", "score": 6 }, { "id": 10005, "username": "user-5", "sex": "女", "city": "城市-5", "sign": "簽名-5", "experience": 173, "logins": 68, "wealth": 60344147, "classify": "作家", "score": 87 }, { "id": 10006, "username": "user-6", "sex": "女", "city": "城市-6", "sign": "簽名-6", "experience": 982, "logins": 37, "wealth": 57768166, "classify": "作家", "score": 34 }, { "id": 10007, "username": "user-7", "sex": "男", "city": "城市-7", "sign": "簽名-7", "experience": 727, "logins": 150, "wealth": 82030578, "classify": "作家", "score": 28 }, { "id": 10008, "username": "user-8", "sex": "男", "city": "城市-8", "sign": "簽名-8", "experience": 951, "logins": 133, "wealth": 16503371, "classify": "詞人", "score": 14 }, { "id": 10009, "username": "user-9", "sex": "女", "city": "城市-9", "sign": "簽名-9", "experience": 484, "logins": 25, "wealth": 86801934, "classify": "詞人", "score": 75 }, { "id": 10010, "username": "user-10", "sex": "女", "city": "城市-10", "sign": "簽名-10", "experience": 1016, "logins": 182, "wealth": 71294671, "classify": "詩人", "score": 34 } ] }
這里只給出10條數據，格式要嚴格按照這個來，后台返回的數據也要為這種格式的，無論是用何種框架，采用何種方法讀取數據庫內容，只要提取出來的數據正確，都可以運用layui
對其中代碼解釋下：
"code":0 -數據狀態的字段名稱（默認），這里必須是0,0代表成功，其他數值均代表錯誤
"msg":"" -狀態信息（默認值）
"count":100 -數據總數，根據情況自行而定
"data":[{},{}] -數據列表的字段名稱（默認為data）
3-4、設置表頭的監聽事件
//監聽 頭 工具欄事件 table.on('toolbar(test)', function(obj) { var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //獲取選中的數據 switch(obj.event) { case 'add': layer.msg('添加'); break; case 'update': if(data.length === 0) { layer.msg('請選擇一行'); } else if(data.length > 1) { layer.msg('只能同時編輯一個'); } else { layer.alert('編輯 [id]：' + checkStatus.data[0].id); } break; case 'delete': if(data.length === 0) { layer.msg('請選擇一行'); } else { layer.msg('刪除'); } break; }; });
3-5、對行的操作設置監聽事件
//監聽 行 工具事件 table.on('tool(test)', function(obj) { //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" var data = obj.data ,//獲得當前行數據 layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'detail') { layer.msg('查看操作'); } else if(layEvent === 'del') { layer.confirm('真的刪除行么', function(index) { obj.del(); //刪除對應行（tr）的DOM結構 layer.close(index); //向服務端發送刪除指令 }); } else if(layEvent === 'edit') { layer.msg('編輯操作:<br>' + JSON.stringify(data)); } });
到這里解析結束，雜亂啊，還是思路沒理清，還要研究好久啊
4、附上完整的代碼吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>layui在線調試</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <!--這里要改成自己的資源路徑--> <style> body { margin: 20px; } </style> </head> <body> <table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary 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> </body> <script src="layui/layui.js"></script> <!--這里要改成自己的資源路徑--> <script> layui.use('table', function() { var table = layui.table; //表格 //向世界問個好 layer.msg('Hello World'); //執行一個 table 實例 table.render({ elem: '#demo', height: 600, url: 'new1.json',//數據接口 title: '用戶表', page: true, //開啟分頁 toolbar: 'default' ,//開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔, totalRow: true ,//開啟合計行 cols: [//表頭 [ { type: 'checkbox', fixed: 'left' }, { field: 'id', title: 'ID', width: 80, sort: true }, { field: 'username', title: '用戶名', width: 80 }, { field: 'sex', title: '性別', width: 80, sort: true }, { field: 'city', title: '城市', width: 80 }, { field: 'sign', title: '簽名', width: 177 }, { field: 'experience', title: '積分', width: 80, sort: true }, { field: 'score', title: '評分', width: 80, sort: true }, { field: 'classify', title: '職業', width: 80 }, { field: 'wealth', title: '財富', width: 135, sort: true }, { fixed: 'right', width: 378, align: 'center', toolbar: '#barDemo' } ] ] }); //監聽 頭 工具欄事件 table.on('toolbar(test)', function(obj) { var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //獲取選中的數據 switch(obj.event) { case 'add': layer.msg('添加'); break; case 'update': if(data.length === 0) { layer.msg('請選擇一行'); } else if(data.length > 1) { layer.msg('只能同時編輯一個'); } else { layer.alert('編輯 [id]：' + checkStatus.data[0].id); } break; case 'delete': if(data.length === 0) { layer.msg('請選擇一行'); } else { layer.msg('刪除'); } break; }; }); //監聽 行 工具事件 table.on('tool(test)', function(obj) { //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" var data = obj.data ,//獲得當前行數據 layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'detail') { layer.msg('查看操作'); } else if(layEvent === 'del') { layer.confirm('真的刪除行么', function(index) { obj.del(); //刪除對應行（tr）的DOM結構 layer.close(index); //向服務端發送刪除指令 }); } else if(layEvent === 'edit') { layer.msg('編輯操作:<br>' + JSON.stringify(data)); } }); }); </script> </html>
寫的很不好，還要再努力學習中，具體說明請看layui的官方文檔：https://www.layui.com/doc/modules/util.html
layui文件下載：https://www.layui.com/