今天早上想将后台中的表格部分使用layui的动态表格模块来实现，早上简单的看了下手册，晚上回家详细的看了手册，写了代码，实现了功能。下面直接上代码及效果图：
一、效果图
描述：实现可表头宽度自动适应，对关键字段进行了排序操作（ID，排序），添加了常用的操作按钮（编辑、删除），右上角添加了工具栏（tool），包含内置的筛选、打印、导出等三个功能，都是layui内置好的。
二、thinkphp代码
代码语言：javascript复制/**
* 数据
* @return thinkresponseJson
* @throws thinkexceptionDbException
*/
public function apiGetIndex()
{
$limit = input('get.limit');
$data = $this->link_model->getPageList([], '', '', $limit);
$data = json_decode(json_encode($data), true);
return json(['code' => 0, 'data' => $data['data'], 'count' => $data['total']]);
}注意事项：code = 0 表示成功，data = [ ] 表示返回的数据，count = '' 表示总数 此三项为必须项
三、HTML代码
代码语言：javascript复制<table id="table" lay-filter="test"></table>
<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>四、JS代码
代码语言：javascript复制<script>
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#table'
, height: 312 //表格高度
, even: true //隔行换色
, url: '/admin/link/api.html' //数据接口
, page: true //开启分页
, toolbar: true //开启表格头部工具栏区域
, defaultToolbar: ['filter', 'print', 'exports'] //工具栏右侧的图标
, text: {
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
, cols: [[ //表头
{field: 'id', title: 'ID', sort: true, fixed: 'left'}
, {field: 'create_time', title: '添加时间'}
, {field: 'link_name', title: '链接名称'}
, {field: 'link_url', title: '链接地址'}
, {field: 'link_order', title: '排序', sort: true}
, {field: 'link_status', title: '展现状态'}
, {field: 'link_open', title: '打开方式'}
, {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
//监听工具条
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 === 'del') { //删除
layer.confirm('真的删除此数据吗？', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
, title: 'xxx'
});
}
});
});
</script>此代码已经上传至码云
