表格

基础表格

<table class="layui-hide" id="test" lay-filter="test123"></table>

<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </div>
</script>
<script>
layui.use(function(){
        var table = layui.table;
        // 创建渲染实例
        table.render({
            elem: '#test',
            url: 'getListByPage', // 此处为静态模拟数据，实际使用时需换成真实接口
            cellMinWidth: 80,
            page: true,
            method:"post",
            contentType:'application/json',
            request: {
                pageName: 'currentPage', // 页码的参数名称，默认：page
                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
            },
            response: {
                statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function(res){ // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.data.total, // 解析数据长度
                    "data": res.data.rows // 解析数据列表
                };
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', width:40, title: 'ID'},
                {field:'categoryName', width:140,  title: '类目名称'},
                {field:'title', width:180, title: '标题'},
                {field:'price', width:80, title: '价格'},
                {field:'isFree',  title: '是否收费'},
                {field:'status', width:100, title: '状态',sort:true,templet: function (row) {
                    // d 是行数据，可以根据 d 中的数据来返回自定义的 HTML 字符串
                    if(row.status === 1){
                        return '<span style="color: green;">正常</span>';
                    } else {
                        return '<span style="color: red;">异常</span>';
                    }
                }},
                {field:'createTime', width:180, title: '创建时间'},
                {field:'sort', title:'排序'},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]],
            error: function(res, msg){
                console.log(res, msg)
            }
        });
        //监听表格排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            // obj为表格排序数据
            console.log(obj.field); // 当前排序的字段名
            console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        
            // 尽管我们的 table 自带排序功能，但并没有请求服务端。
            // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
            let field = {};
            field.order = obj.type;
            field.orderField = obj.field;
        
            table.reload('test', {
                where: field
            })
        });
        // 触发单元格工具事件
        table.on('tool(test123)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            if(obj.event === 'edit'){
                window.location.href = '/admin/sku/sku_add?id='+data.id;
            } else if(obj.event === 'del'){
                window.location.href = '/admin/sku/delById?id='+data.id;
            }
        });
    });
</script>