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 //解析數據列表
          };
      }
    });