layui 规定的数据格式

layui 规定的数据格式

数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。

table 组件默认规定的数据格式为（参考：https://www.layui.com/demo/table/user/?page=1&limit=30）：


默认规定的数据格式layui.code

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

假设您返回的数据格式layui.code

{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}

那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
}); 

也可以直接定义一个符合layui数据格式的model

 public class LayuiModel
    {
        public int code { get; set; }
        public int count { get; set; }

        public List<User> data = new List<User>();
    }

数据填充

填充代码

public ActionResult GetUser(string UserName = "")
{

    List<User> list = new List<User>();
    DataTable dt = MyDBHelper.ExecuteQuery("select u.id,u.UserName,u.PassWord,r.rolename from [User] u left join userrole us on u.id = us.userid left join role r on us.roleid = r.id where u.UserName like '%" + UserName + "%'");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        list.Add(new User() { id = dt.Rows[i]["id"].ToString(), UserName = dt.Rows[i]["UserName"].ToString(), PassWord = dt.Rows[i]["PassWord"].ToString(), rolename = dt.Rows[i]["rolename"].ToString() });
    }
    LayuiModel m = new LayuiModel() { code = 0, count = list.Count, data = list };
    //var json = JsonConvert.SerializeObject(list);
    return Json(m);
}

像这样就收数据就不需要用parseData了，可以直接这样常规写法

    table.render({
        elem: '#test'
       , method: 'post'//默认是get
      , url: '/User/GetUser'
      , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: ['filter','exports', 'print'
        , { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可。 'filter'(查看或隐藏列)'exports'(导出)'print'(打印)
            title: '提示'
        , layEvent: 'LAYTABLE_TIPS'
        , icon: 'layui-icon-tips'
        }
        , { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可。 'filter'(查看或隐藏列)'exports'(导出)'print'(打印)
            title: '提示'
        , layEvent: 'LAYTABLE_TIPS2'
        , icon: 'layui-icon-tips'
        }]
      , title: '用户数据表'
      , cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true, hide: true }
        , { field: 'UserName', title: '用户名', edit: 'text' }
        , { field: 'PassWord', title: '用户密码', edit: 'text', hide: true }
        , { field: 'rolename', title: '用户角色', edit: 'text' }
        , { fixed: 'right', title: '操作', toolbar: '#barDemo' }
      ]]
      , id: 'testReload'
      , page: true
      , limits: [3, 5, 10, 20]
      , limit: 10 //每页默认显示的数量
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
          var result;
          console.log(this);
          console.log(JSON.stringify(res));
          if (this.page.curr) {
              result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          }
          else {
              result = res.data.slice(0, this.limit);
          }
          return {
              "code": res.code, //解析接口状态
              //"msg": res.msg, //解析提示文本
              "count": res.count, //解析数据长度
              "data": result //解析数据列表
          };
      }
    });