layui 数据表格
返回格式:
var json = new
{
code = 0,
count = pagers.totalRows,
msg = "",
data =null
};
请求格式:
table.render({
elem: '#SysSampleIndexTable'
, url: '/SysSample/GetList'
, method: "post"
//, cellMinWidth: 55 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{ type: 'checkbox' }
, { field: 'id', title: 'ID', sort: true, hide: true }
, { field: 'Name', title: '用户名' }
, { field: 'Age', title: '年龄', sort: true }
, { field: 'Bir', title: '生日', hide: true }
, { field: 'Note', title: '简介' } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
, { field: 'Photo', title: '图片', sort: true, hide: true }
, { field: 'CreateTime', title: '创建时间' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 160 }
]]
, page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 3 //只显示 1 个连续页码
, first: '首页' //不显示首页
, last: '尾页' //不显示尾页
}
, limit: 6
, limits: [6, 10, 20, 30, 50, 100]
, where: {//条件
id: queryStr
//,sort:'CreateTime'//排序字段
}
//, request: {//请求参数
// pageName: 'page' //页码的参数名称,默认:page
// , limitName: 'limit' //每页数据量的参数名,默认:limit
//}
//, response: {//返回参数
//statusName: 'status' //规定数据状态的字段名称,默认:code
//, statusCode: 200 //规定成功的状态码,默认:0
//, msgName: 'hint' //规定状态信息的字段名称,默认:msg
//, countName: 'total' //规定数据总数的字段名称,默认:count
//, dataName: 'rows' //规定数据列表的字段名称,默认:data
//}
//,initSort: {
// field: 'id' //排序字段,对应 cols 设定的各字段名
// , type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
//}
})
layui 表格工具栏:
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
table.on('tool(SysSampleIndexTable)', function (obj) {
//调试 -> console.log(obj)
var id = obj.data.id;
if (obj.event === 'del') {
layer.confirm('@Suggestion.YouWantToDeleteTheSelectedRecords', function (index) {
//obj.del();
//post请求删除
$.post('/SysSample/Delete', { "id": id }, function (Result) {
//提示成功或失败
if (Result.type = 1) {
layer.msg('@Suggestion.DeleteSucceed', {
offset: 'rb',
icon: 1,
})
}
else {
layer.msg('@Suggestion.DeleteFail', {
offset: 'rb',
icon: 1,
})
}
initTable("");
}, 'json');
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.open({
type: 2,
title: '编辑',
maxmin: true,
shade: 0.8,
area: ['450px', '90%'],
content: '/SysSample/Edit?id=' + encodeURI(id) //iframe的url});
})
}
else if (obj.event === "details") {//详情页
layer.open({
type: 2,
title: '详情',
maxmin: true,
shade: 0.8,
area: ['450px', '90%'],
content: '/SysSample/Details?id=' + id //iframe的url});
})
}
});