table-layui

本文章为原创文章，转载请注明出处

操作按钮

<table class="layui-table" id="articleData" lay-filter="article"></table>
    <script type="text/html" id="barBtn">
    <a class = "layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <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>

删除按钮

layer.confirm('确定删除吗？', function(index){
                obj.del();
                layer.close(index);
            });

数据绑定

layui.use('table',function(){
        var table=layui.table;
        table.render({
            elem:'#articleData',
            height:500,
            width: 1000, 
            url:'/System/Article/GetData/',
            page:true,
            cols:[[
                {type:'checkbox'},
                {field:'ShortTitle',title:'标题',width:150},
                {field:'UserName',title:'用户',width:150},
                {field:'CreateTime',title:'时间',width:150,sort:true},
                {field:'Sort',title:'排序',width:150,sort:true},
                {field:'IsTop',title:'是否置顶',width:150},
                {field:'right',width:200,align:'center',toolbar:'#barBtn'}
            ]]
        });

分页条

page:true开启分页条

页码默认参数：page

每页条数默认参数：limit

自定义配置参数

request: {
            pageName: 'curr', //页码的参数名称，默认：page
            limitName: 'nums' //每页数据量的参数名，默认：limit
        }

自定义数据格式

response: {
        statusName: 'status', //数据状态的字段名称，默认：code
        statusCode: 200, //成功的状态码，默认：0
        msgName: 'hint', //状态信息的字段名称，默认：msg
        countName: 'total', //数据总数的字段名称，默认：count
        dataName: 'rows', //数据列表的字段名称，默认：data
    }

自定义后台返回数据格式（上述）

{
            status: 200,
            hint: "",
            total: 1000,
            rows: []
        }

默认接受数据格式

{
            code: 0,
            msg: "",
            count: 1000,
            data: []
        }

猜你喜欢