layui数据表格的使用

抗争的小青年

已于 2022-12-02 22:29:02 修改

阅读量2.4k

点赞数 2

分类专栏： JavaScript node.js mySql数据库

于 2022-06-30 20:11:28 首次发布

本文链接：https://blog.csdn.net/liyuchenii/article/details/125547354

版权

layui 前端 javascript

JavaScript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

node.js

9 篇文章 0 订阅

订阅专栏

mySql数据库

4 篇文章 0 订阅

订阅专栏

layui自带的表格数据渲染

后端返回需要的数据

layui官方文档

下面的所有操作的前提是你必须引入layui!

一，先写html

<body>
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 只需要这里是表格标签 -->
      <table class="layui-table tableRender"></table>
    </div>
  </div>
</body>

注意：这里表格标签的内容是空的。

二，在页面中引入js文件，内容为：

  layui.use(['element', 'table'], function () {
    var { element, table } = layui

    table.render({
      elem: '.tableRender',
      url: "/admin/nav/query",  //后端传数据的接口
      cols: [[ //表头
        { field: "nav_id", title: 'ID', width: 80, sort: true, fixed: 'left' },
        { field: 'nav_name', title: '导航名称' },
        { field: 'nav_alias', title: '导航别名' },
        { field: 'nav_sort', title: '导航排序' },
        { field: 'nav_is_show', title: '是否展示' },
        { field: '', title: '操作' },

      ]],
      page: true
    });

  });

引入table模块，并解构赋值。

三，写后端数据接口，通过查询数据库，来返回数据

//查看导航页面数据
router.get("/query", (req, res) => {
  const sql = "SELECT * FROM nav;"
  db.query(sql, (err, results) => {
    if (err) {
      return res.send({
        code: 1,
        msg: err.msg
      })
    }
    if (results.length) {

      return res.send({
        code: 0,
        msg: "数据查询成功",
        data: results,
        count: 12,     // 这里是记录总条数
      })
    } else {
      return res.send({
        code: 1,
        msg: "数据信息查询失败"
      })
    }
  })
})

在对应路由中写接口，返回数据要按照layui的要求给，具体还的看官方文档。

后端数据接口路由使用express.js搭建。

使用了mysql2模块，实现数据库的交互。这里的db就是封装后的模块，通过引入来使用，就不在这里细说了。

四，页面渲染成功

Snipaste_2022-06-30_19-58-44

Snipaste_2022-06-30_19-58-10

注意后端字段和cols中的field字段要一致，这样才能成功渲染。

前端处理数据

（2022年12月2日更）
之前的文章得到了大家的一致好评，但大家最多提到的还是后端返回数据的问题，其实不管后端返回的数据格式是什么，layui都可以应对和处理。

这得以于layui中数据表格里的一个参数parseData,我们可以在这里对前端请求过来的数据进行过滤处理：
传送链接

      layui.table.render({
        elem: '#demo',
        url: 'requrl'
        method: 'GET',
        page: false, 
        limit: 10,
        loading: false,
        cols: [[ 
          { field: 'immuneQty', title: '字段一', width: 112 }
          , { field: 'materialSubTypeName', title: '字段二', width: 98 }
          , { field: 'immuneDate', title: '字段三', width: 106, templet: function (d) { return d.immuneDate.slice(0, 10) } }
          , { field: 'materialName', title: '字段四', width: 377 }
        ]],
        text: {
          none: '无数据'
        },
        parseData: function (data) {
          return {
            "code": data.code === 200 ? 0 : data.code, //解析接口状态
            "msg": data.message || '',
            "count": data.data.vaccineList ? data.data.vaccineList.length : 0, //解析数据长度
            "data": data.data.vaccineList || [] //解析数据列表
          };
        },
      });

可以看到我们在parseData里进行了数据的过滤，把他处理成layui数据表格想要的格式。所以说不管后端传的是什么，其实对表格的渲染是没什么太大关系的。