Layui框架的使用技巧

最新推荐文章于 2024-08-20 15:50:34 发布

ThatMonth

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量763

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/weixin_44853310/article/details/118067421

版权

SpringBoot 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.选中html代码块，ctrl+shift+减号- 就会全部折叠

2.加入Thymeleaf模板需要添加命名空间

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



</html>

2.1 替换方法

2.2添加 th:fragment

2.3主页面用一行代码替换

3.SpringBoot里的文档架构

4.layui里的table.render里括号要用空格隔开，不然识

别不了

5.fori加回车：自动创建for循环，很方便

6.该删的删，让页面变简洁一点

7.引入数据表格

layui官网：https://www.layui.com/doc/

 table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });

,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }

table.render({
            elem: '#table1'
            ,url:'/student.json'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [ [       //括号之间要用空格隔开！！
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'name',  title: '姓名'}       //width删掉让它自动匹配
                ,{field:'sex', title: '性别', sort: true}
                ,{field:'stuNo',  title: '学号'}

            ] ]

            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 50, //解析数据长度
                    "data": res //解析数据列表
                };
            }

        });

7.1开启头部工具栏

7.2开启文字按钮工具条

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>