阿里云

Thinkphp+layui动态表格的使用

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


一、效果图

动态表格


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


Thinkphp


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


此代码已经上传至码云

喜欢就点个赞吧