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});
???????????????????})
???????????????}
???????????});
.net mvc 框架实现后台管理系统 2
原文地址:https://www.cnblogs.com/newrohlzy/p/9973852.html