layui渲染表格数据

最新推荐文章于 2023-10-21 09:50:49 发布

茶凡_Matrix

最新推荐文章于 2023-10-21 09:50:49 发布

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45833112/article/details/125034628

前端专栏收录该内容

9 篇文章

订阅专栏

好文章需要耐心阅读…茶凡—Matrix

请添加图片描述

layui 的渲染的数据有方法渲染和自动渲染。

🌿方法渲染：所有数据都写在js代码里面，html 只需要引用它，推荐采用这种方式

🌿自动渲染：所有都写在html 里面包括请求（注意这种写法必须是get请求，而且返回的状态码必须为0，不然会导致数据渲染不上去）需要写的代码重复率高，不推荐。

官方文档：table 数据表格文档 - Layui

1、layui 渲染数据

注意

本文中采用的是 thymeleaf + springboot + java + layui 来创建的项目，如果单纯写html可能会有一些区别。

方法渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>

<body class="layui-layout-body">

<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>

<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">
    <table class="layui-hide" id="test" lay-filter='test'></table>
</div>

<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
    layui.use(['table', 'layer','laypage','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#test',
            id: 'tableId',
            url: 'parent/getParentList',
            method:'get',
            title: '用户信息表',
            totalRow: true,
            height: 520,
            width:550,
            cols: [
                [
                {type: "numbers", fixed: 'aa'}
                ,{type: "checkbox", fixed: 'aa'}
                , {field: 'studentName', title: '学生姓名', width: 100}
                , {field: 'personNo', title: '学号', sort:true ,width: 120}
                , {field: 'departmentId', title: '班级', width: 80 }
                , {field: 'parentDeptId', title: '年级', width: 80}

            ]
            ],
            page: true , // 分页
            elem: '#test',
            limit:10,
            parseData: function (res) {  // 分页效果必须要加这个函数只加 page:true 不起作用。
                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.data.length, "data": result};
            }

        });
    });
    
</script>
</body>
</html>

自动渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>

<body class="layui-layout-body">

<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>


<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">

    <table class="layui-table"
           lay-data="{height:500,width:1260, url:'/parent/getParentList', page:true, id:'test'}"
           lay-filter="test">
        <thead>
        <tr>
            <th lay-data="{checkbox:true}"></th>
            <th lay-data="{field:'departmentId', width:80, sort: true}">班级</th>
            <th lay-data="{field:'parentDeptId', width:80, }">年级</th>
            <th lay-data="{field:'personNo',width:120,}">学号</th>
            <th lay-data="{field:'studentName', width:80  }">学生</th>
        </tr>
        </thead>
    </table>
    
</div>

<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
    layui.use(['table', 'layer','laypage','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form,
            table = layui.table;
    });

</script>
</body>
</html>

2、后台接口数据格式

后台的就不贴代码了，文章末尾可以获取

请添加图片描述

{
  "msg": "success",
  "code": 0,
  "data": [
    {
      "departmentId": 201505,
      "parentDeptId": 2015,
      "personNo": "201505019",
      "studentName": "何金贝"
    },
    {
      "departmentId": 201508,
      "parentDeptId": 2015,
      "personNo": "201508003",
      "studentName": "卿屹昊"
    },
    {
      "departmentId": 201601,
      "parentDeptId": 2016,
      "personNo": "201601001",
      "studentName": "黄星云"
    }
    ]
  }