Layui table 动态数据渲染（ layui is not defined ）

想尝试用一下layui的几个组件，以实现前后端的交互。虽然代码简单，但对于初上手的我，还是有一些小问题，特此记录一下。

下文以 Layui table 组件为例：

后端：springboot 2.1.13
前端：Layui.js

1. idea创建springboot工程，简单配置如下：application.yml

2. 在官网下载最新的Layui包（ https://www.layui.com/ ），然后放入工程的 src\main\resources\static 路径下，如下：

3. 控制器，如下：

@Controller
@RequestMapping("/test")
public class TestController {
    /**
     * 测试页面  http://localhost:8090/test/table
     * @return
     */
     @RequestMapping(value = "/table", method = RequestMethod.GET)
     public String testTable(){
        return "page/table";
    }

    /**
     * 获取table数据
     * @return
     */
    @RequestMapping(value = "/tableData", method = RequestMethod.GET)
    @ResponseBody
    public JSONObject testTableData(){
        //方式一：Object转为JSONObject 
        Employee e1 = new Employee(7369L, "zhang", 800, 20);
        JSONObject jsonObject1 = JSON.parseObject(JSON.toJSONString(e1));

        //方式二：直接创建JSONObject 
        JSONObject jsonObject1 = new JSONObject();
        jsonObject1.put("empno", 7369L);
        jsonObject1.put("ename", "zhang");
        jsonObject1.put("salary", 800);
        jsonObject1.put("deptno", 20);

        //放入集合
        JSONArray jsonArray = new JSONArray();
        jsonArray.add(jsonObject1);

        //返回结果
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 0);
        jsonObject.put("msg", "success");
        jsonObject.put("count", 1);
        jsonObject.put("data", jsonArray);
        
        return jsonObject;
    }
}

4. 页面如下：table.html，地址：\src\main\resources\templates\page\table.html

在layui官网，直接复制了table的页面代码来用 https://www.layui.com/demo/table.html, 此处修改了field和title

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Layui</title>
    <meta name='renderer' content='webkit'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    <!-- 注意 href ！！！ -->
    <link rel='stylesheet' href='/plugins/layui/css/layui.css' media='all'>
</head>
<body>
<div>zhang</div>
<table id='test'></table>

<!-- 注意 src！！！ -->
<script src='/plugins/layui/layui.js' charset='utf-8'></script>

<script>
    <!-- 注意 src！！！ -->
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/test/tableData'  //控制器地址即可
            <!-- 注意 src！！！ -->
            ,cols: [  //注意：不要把 [[ 连起来写！！
                [
                    {field:'empno',  title: '编号'}
                    ,{field:'ename', title: '名称'}
                    ,{field:'salary', title: '工资'}
                    ,{field:'deptno',  title: '部门'}
                ]
            ]
        });
    });
</script>
</body>
</html>

5. 遇到的问题：

1> layui is not defined

一般是引用的js位置不对，静态资源读取不到。

springboot 的默认静态资源的路径为：

spring.resources.static-locations=classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/ 优先级从高到低。

（默认配置的 /** 会映射到 /static（或 /META-INF/resources、/public、/resources））

所以依默认静态资源访问路径（不需要在application.yml专门设置）即可，页面table.html中引用的layui.js地址写为 href='/plugins/layui/css/layui.css' 即可，注意：最前面必须加/ ，引入layui.css同理。虽然此地址在idea中会显示黄色提醒，但没影响。

2> 回调数据渲染失败

layui的返回数据有特殊的格式要求，不仅仅返回json就完了，而是要求如下格式：

JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "success");
jsonObject.put("count", 1);
jsonObject.put("data", jsonArray);
必须是这样的json，还要注意的是，其中的data是要渲染的数据（列表有多条数据），类型是JSONArray，
哪怕只有一条记录，也要放入JSONArray，用JSONArray来给data赋值。

3> 不要乱用[[ ]]

在 table.render 中的 cols，不要把 [[ 或 ]] 合在一起写，会被解释称其他含义而报错，要换行写

6 访问成功：

posted on 2020-07-08 16:35 书生游阅读(6106) 评论(0) 编辑收藏举报

Layui table 动态数据 渲染（ layui is not defined ）

Layui table 动态数据渲染（ layui is not defined ）