本文章为原创文章,转载请注明出处
操作按钮
<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: [] }