layui 方法渲染表格数据

爱被打了一巴掌 2024-03-31 17:17 252阅读 0赞 
  1. layui.use('table', function () {
  2.     const table = layui.table;
  3.     //第一个实例
  4.     table.render({
  5.         elem: '#demo'
  6.         , height: window.screen.height * 0.59
  7.         , url: '/info/list'
  8.         , method: 'post'
  9.         , contentType: "application/json"
  10.         , page: true
  11.         , parseData: function (res) { //res 即为原始返回的数据
  12.             return {
  13.                 code: 0,
  14.                 msg: "",
  15.                 count: res.length,
  16.                 data: res
  17.             };
  18.         }
  19.         , cols: [
  20.             [
  21.                 {field: 'infoId', title: 'ID', width: 80, sort: true, fixed: 'left'}
  22.                 ,{field: 'countryId', title: '国家名称', width: 80 }
  23.                 , {field: 'universityId', title: '用户名', width: 80}
  24.                 , {field: 'directionId', title: '性别', width: 80, }
  26. ,{title: '大学英文', width: 170, templet: '<div>{
  27.   {d.university.universityNameEN}}</div>'}
  29. ]
  30.         ]
  31.         , text: {none: '无数据'}
  32.     });
  33. });

注意事项

  1. [ [] ]要换行写
  2. layui 有固定的返回格式，parseData声明一下
  3. 如大学英文，是对象嵌套对象

发表评论

表情：
评论列表 （有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

    相关 LayUi 之 数据表格

    我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 480 阅读