thinkphp 可编辑表格：layui动态表格的使用

thinkphp 可编辑表格：layui动态表格的使用<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: '

今天早上想将后台中的表格部分使用layui的动态表格模块来实现，早上简单的看了下手册，晚上回家详细的看了手册，写了代码，实现了功能。下面直接上代码及效果图：

一、效果图

描述：实现可表头宽度自动适应，对关键字段进行了排序操作（ID，排序），添加了常用的操作按钮（编辑、删除），右上角添加了工具栏（tool），包含内置的筛选、打印、导出等三个功能，都是layui内置好的。

二、thinkphp代码

/** * 数据 * @return \think\response\Json * @throws \think\exception\DbException */ 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代码

<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代码

<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>

此代码已经上传至码云