layui table数据格式生成

layui 后台数据格式生成转换，与前台显示设置

1、Layui对发送到前台数据有指定的格式要求，建立指定的格式类

 1     public class LayuiTableData
 2     {
 3         /// <summary>
 4         /// 数据状态字段
 5         /// </summary>
 6         public string code { get; set; }
 7         /// <summary>
 8         /// 状态信息字段
 9         /// </summary>
10         public string msg { get; set; }
11         /// <summary>
12         /// 数据总数字段
13         /// </summary>
14         public string count { get; set; }
15         /// <summary>
16         /// 数据列表内容
17         /// </summary>
18         public IList data {get;set;}
19     }

2、初始化Layui的数据模型

 1                     //实例化一个layui数据模型
 2                     Comm.LayuiTableData LTD = new Comm.LayuiTableData();
 3                     LTD.code = "0";
 4                     //data的行数，与分页有关
 5                     LTD.count = ptb.Count().ToString();
 6                     //数据按照当前分页信息获取nRecordStart是页编号，limit是要获取的数据行数，使用了.NET的Linq技术
 7                     LTD.data = ptb.Skip(nRecordStart).Take(limit).ToList();
 8                     LTD.msg = "";
 9                     //转换JSON
10                     JsonResult JSON = Json(LTD, JsonRequestBehavior.AllowGet);
11                     return JSON;

3、前台定义一个table

    <div>
        <table id="tbProject"></table>
    </div>

4、js渲染table，前两行引用必须放在渲染代码上面，反正放到其他位置就不行

 1     <script src="~/UI/jquery-3.4.1.min.js"></script>
 2     <script src="~/UI/layui-v2.5.5/layui/layui.all.js"></script>
 3     <script>
 4         layui.use('table', function () {
 5             var table = layui.table;
 6             //渲染table
 7             table.render({
 8                 //table控件ID
 9                 elem: '#tbProject'
10                 //表高度
11               , height: 410
12               , url: '/Sys/ProjectForYear/' //数据接口
13               , page: true //开启分页
14             , where: { Year: '2019' }
15                 , id: 'testReload'
16               , method: 'post'
17               , cols: [[ //表头
18                 { field: 'uid', title: 'UID', sort: true, fixed: 'left', hide: 'true' },
19                 { field: 'projectCode', title: '项目编号', sort: true, fixed: 'left' },
20                 { field: 'projectName', title: '项目名称', sort: true, fixed: 'left' },
21                 { field: 'addTime', title: '增加时间', sort: true },
22                 { field: 'enable', title: '开启/关闭', sort: true },
23                 { field: 'projectDe', title: '项目描述', sort: true },25                 { field: 'projectYear', title: '年份', sort: true },
26                 { field: 'state', title: '状态', sort: true }29               ]]
30             });
31             form = layui.form;
32             form.on('select(selyear)', function (data) {
33                 //alert(data.value);
　　　　　　　　　　　//根据年份选择刷新表
34                 updatetable(data);
35             });
36         });

 

posted @ 2019-11-11 11:01  孟二  阅读(653)  评论(0)    收藏  举报