table是 layui 最核心的組成之一。它用於對表格進行一些列功能和動態化數據操作，涵蓋了日常業務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持對表格重載（比如搜索、條件篩選等），支持復選框，支持分頁，支持單元格編輯等等一些列功能。
下邊整理了一個栗子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layer學習</title>
<link href="/Content/mycss.css" rel="stylesheet" />
<link href="/Content/layui/css/layui.css" rel="stylesheet" />
<script src="/Content/layui/layui.js"></script>
</head>
<body>
<!--表格-->
<div id="myTable" lay-filter="test"></div>
<!--工具欄-->
<script type="text/html" id="barDemo">
<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>
<script type="text/html" id="allow">
<!-- 這里的 checked 的狀態只是演示 -->
<input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允許" lay-filter="allowSetFilter" {{ d.IsAllow == true ? 'checked' : '' }}>
</script>
<script>
layui.use(['table','form'], function () {
var table = layui.table;
form = layui.form;
//*******************************渲染表格**********************************
table.render({
//------------------------核心參數
elem: '#myTable' //渲染的dom元素
, url: '/Home/GetUserList' //異步請求接口
, page: true //開啟分頁
, id: 'elementID' //容器唯一ID
, cols: [[ //列設置
{ field: 'Id', title: '編號', sort: true, fixed: 'left' }
, { field: 'Name', title: '姓名' }
, { field: 'Age', title: '年齡' }
, { field: 'Role', title: '角色' }
, { field: 'CreateTime', title: '創建時間' }
, {
title: '自定義模板', width: 200
, templet: function (d) {
return '姓名：<span style="color: #c00;">' + d.Name + '</span>'
}
}
, { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' }
, { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }
]]
//-----------------------------異步請求設置
, method: 'post' //異步請求方式
, headers: { hello: 'hengheng' } //在request的header中添加數據
, request: { //request設置，默認值如下
pageName: 'page',
limitName: 'limit'
}
, response: { //response設置，默認值如下
statusName: 'code'
, countName: 'count'
, dataName: 'data'
, msgName: 'msg'
}
, where: { //向后台添加的額外參數
nameParm: 'u',
roleParm: 'o'
}
//-----------------------加載的其他選項
, done: function (res, curr, count) {
//res為接口返回的數據、count為數據總長度
console.log(res);
console.log(curr);
console.log(count);
}
, text: {
none: '暫無相關數據' //默認：無數據。
}
, initSort: {
field: 'Id' //排序字段為Id
, type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認排序
}
})
//*******************************監聽表格**********************************
table.on('tool(test)', function (obj) { //test為lay-filter值
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event
var tr = obj.tr; //獲得當前行 tr 的DOM對象
if (layEvent === 'edit') {
var id = data.Id;
layer.open({
type: 2
, title: '修改' //標題欄
, scrollbar: false
, area: ['400px', '300px']
, shade: 0.5
, id: 'layerId' //設定一個id，防止重復彈出
, moveType: 1 //拖拽模式，0或者1
, content: '/Home/EditUserInfo?id=' + id
});
} else if (layEvent === 'del') {
layer.confirm('真的刪除嗎？', function (index) {
obj.del(); //刪除對應行（tr）的DOM結構
layer.close(index);
var id = data.Id; //向服務端發送刪除指令
$.post("/Home/DeleteUserInfo", { "id": id }, function (result) {
if (result.IsSuccess === 1) {
layer.msg(result.Msg);
table.reload('elementID');
} else {
layer.msg(result.Msg);
table.reload('elementID');
}
})
});
}
});
//*******************************監聽checkbox********************************
//監聽操作----置頂
form.on('checkbox(allowSetFilter)', function (obj) {
var pre = {
"Id": this.name,
"IsAllow": obj.elem.checked
};
//alert(this.name+'----'+obj.elem.checked);
$.post('/Home/SetAllow', pre, function (result) {
if (result.IsSuccess === 1) {
layer.msg(result.msg)
} else {
layer.msg(result.msg)
}
})
});
});
</script>
</body>
</html>
注:這是為了個人查找方便整理的文檔，並沒有總結完全，查看更多可訪問官網http://www.layui.com/doc