• 第一章 使用layui的表格和表单

    1.layui的引入

    1.1 本地引入

            首先下载layui，并将其放在自己的项目目录里。

    (一种下载地址:Layui中文网 - 经典开源模块化前端 UI 框架（官方开发文档）)

    引入方式：

     

    2. <link rel="stylesheet" href="${pageContext.request.contextPath}/Layui/layui-v2.6.8/layui/css/layui.css"    media="all">
    4. <script src="${pageContext.request.contextPath}/Layui/layui-v2.6.8/layui/layui.js" charset="utf-8">script>

     ${pageContext.request.contextPath} ：部署的应用程序名，也就是tomcat里配置的 Application contexte。

    1.2  CDN服务器

            不需要下载layui文件，能够直接引入，需要联网。

    1. <link rel="stylesheet" href="https://layui.org.cn/res/layui/dist/css/layui.css"    media="all">
    2.  
    3. <script src="https://layui.org.cn/res/layui/dist/layui.js" charset="utf-8">script>

    2. 使用layui

    2.1 加载模块

            使用layui模块的前提是要先引入相应的模块。

    方法：layui.use([mods],callback)

    如需要使用表格，表单，layui的时间样式，jquery和layui的弹出层组件layer:

    1.    layui.use(['table','layer','form','laydate'], function(){
    2.         var table = layui.table
    3.             ,form = layui.form
    4.             ,layer = layui.layer
    5.             ,$ = layui.$
    6.             ,laydate = layui.laydate;
    7.         })

    var table = layui.table 就是换个名字。

     2.2 表格

    2.2.1  定义一个table

    2. <div class="layui-container" >
    3.     <table id="goodsTable" lay-filter="goodsTable">table>
    4. div>

    套不套div无所谓，但table的id和lay-filter一个都不能少，内容可以不一样；

    lay-filter:事件过滤器，相当于是layui中的标签id，后面表格中的一些触发事件需要用到。

     2.2.2 渲染表格

            通过render()方法生成表格

    1.         //请求数据，渲染表格
    2.         table.render({
    3.             elem: '#goodsTable'//要渲染的表格的id
    4.             ,url: '${pageContext.request.contextPath}/GoodsServlet/allGoods'//请求地址
    5.             ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    6.             ,page:true  //是否开启分页
    7.             ,toolbar:"#goodsTableToolbar"//表头工具条
    8.             ,width:800  //表格宽度
    9.             ,limit:10   //初始每页的数据数
    10.             ,limits:[5,10,15,20,25] //选择每页数据数的下拉框的取值
    11.             ,cols: [[
    12.                 {title:'多选',type:'checkbox',width: 60}
    13.                 ,{field:'goodsId', width:80, title: '商品编号', sort: true}
    14.                 ,{field:'goodsName', width:80, title: '商品名'}
    15.                 ,{field:'price', width:80, title: '价格', sort: true,}
    16.                 ,{field:'produceDate', width:120, title: '生产日期',sort: true,templet:function (d) {
    17.                         return layui.util.toDateString(d.produceDate,"yyyy-MM-dd")
    18.                     }}
    19.                 ,{field:'address', title: '产地', width: 80} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
    20.                 ,{field:'categoryName', title: '分类', width:80}
    21.                 ,{title: '操作',toolbar:"#goodsTableRowToolbar",fixed:"right"}//行内工具条
    22.             ]]
    23.         });

    title:表格的列名

    field:返回的数据的键，和数据访问层返回的数据要一致；

    width:该列的宽度；

    sort:开启排序

    templet:自定义列模板，可以实现一些逻辑判断等，上面就是用于格式化日期，function中的d是被layui封装的一整行的数据，Object类型；

    toolbar： 用于给表格加上一些常用的按钮，需要提前定义好参数；

    2. <script type="text/html" id="goodsTableToolbar">
    3.     <div>
    4.         <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="goodsAdd">添加商品button>
    5.         <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="goodsDeleteBatch">批量删除button>
    6.     div>
    7. script>
    8.  
    10. <script type="text/html" id="goodsTableRowToolbar">
    11.     <div class="layui-btn-container">
    12.         <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="goodsEdit">编辑button>
    13.         <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="goodsDelete">删除button>
    14.     div>
    15. script>

     这只是一种方式，要注意的是 lay-event 这个一定要，没有虽然可以成功引入但是没法使用，button就是点击事件无效。

     2.2.3 工具条事件(数据的删除，批量删除，修改和添加的弹出层)

    1.         /*行工具条的点击事件*/
    2.         table.on("tool(goodsTable)",function (obj){
    3.             console.log(obj);
    4.             switch (obj.event){
    5.                 case "goodsEdit":
    6.                     $("#goodsForm")[0].reset();
    7.                     $("#actionUrl").val("${pageContext.request.contextPath}/GoodsServlet/update");
    8.                     form.val("goodsForm",obj.data);
    9.                     showGoodsForm();
    10.                     break;
    11.                 case "goodsDelete":
    12.                     layer.confirm("确定要删除么?",function (index){
    13.                         deleteGoods(obj.data.goodsId);
    14.                         layer.close(index);
    15.                     })
    16.                     break;
    17.             }
    18.         })
    1. /*给表头工具条绑定事件*/
    2.         table.on("toolbar(goodsTable)",function (obj){
    3.             switch (obj.event) {
    4.                 case "goodsAdd":
    5.                     //重置表单内容
    6.                     $("#goodsForm")[0].reset();
    7.                     //设置表单的提交地址
    8.                     $("#actionUrl").val("${pageContext.request.contextPath}/GoodsServlet/add");
    9.                     showGoodsForm();
    10.                     break;
    11.                 case "goodsDeleteBatch":
    12.                     var checkStatus = table.checkStatus('goodsTable');
    13.                     var ids = [];
    14.                     for (let i = 0; i < checkStatus.data.length; i++) {
    15.                         ids.push(checkStatus.data[i].goodsId);
    16.                     }
    17.                     layer.confirm("确定要删除么?",function (index){
    18.                         deleteGoods(ids.join(","));
    19.                         layer.close(index);
    20.                     })
    21.                     console.log(checkStatus);
    22.                     break;
    23.             }
    24.         });

    格式固定，其中goodsTable 对应的是这个表格的 lay-filter;

    obj.event 的取值是这个按钮的 lay-event，没有lay-event并不是取不到值这么简单。

     2.3 layui table的数据格式

    2.3.1 请求

             对于渲染表格，以及后续开启分页切换分页等操作，table请求的数据都会包含俩个默认的参数：

    page:页码

    limit:每页的数据数 

    2.3.2 响应

            table默认需要的数据格式：

    1. {
    2.   "code": 0,
    3.   "msg": "",
    4.   "count": 1000,
    5.   "data": [{}, {}]
    6. }

    code: 0 表示成功，其他失败

    msg:提示信息

    count:数据数

    data: table的内容实际需要的数据

    返回数据的方式和Ajax请求的方式一样，只是需要对数据进行加工 。

    1. public class CommonResult {
    2.     private Integer code;
    3.     private String msg;
    4.     private Integer count;
    5.     private Object data;
    6.  
    7.     public CommonResult() {
    8.     }
    9.  
    10.     public CommonResult(Integer code, String msg, Integer count, Object data) {
    11.         this.code = code;
    12.         this.msg = msg;
    13.         this.count = count;
    14.         this.data = data;
    15.     }
    16.  
    17.     public static CommonResult success(){
    18.         return new CommonResult(0,"成功",null,null);
    19.     }
    20.     public static CommonResult success(Integer count,Object data){
    21.         return new CommonResult(0,"成功",count,data);
    22.     }
    23.     public static CommonResult fail(){
    24.         return new CommonResult(1,"失败",null,null);
    25.     }
    26.     public Integer getCode() {
    27.         return code;
    28.     }
    29.  
    30.     public void setCode(Integer code) {
    31.         this.code = code;
    32.     }
    33.  
    34.     public String getMsg() {
    35.         return msg;
    36.     }
    37.  
    38.     public void setMsg(String msg) {
    39.         this.msg = msg;
    40.     }
    41.  
    42.     public Integer getCount() {
    43.         return count;
    44.     }
    45.  
    46.     public void setCount(Integer count) {
    47.         this.count = count;
    48.     }
    49.  
    50.     public Object getData() {
    51.         return data;
    52.     }
    53.  
    54.     public void setData(Object data) {
    55.         this.data = data;
    56.     }
    57.  
    58.     @Override
    59.     public String toString() {
    60.         return "CommonResult{" +
    61.                 "code=" + code +
    62.                 ", msg='" + msg + '\'' +
    63.                 ", count=" + count +
    64.                 ", data=" + data +
    65.                 '}';
    66.     }
    67. }

    对于响应的数据，如果是分页的情况，count是数据库中的所有数据的总条数；data是该页需要的数据数。

     2.4 form 表单

            主要用于数据的添加和修改，表单直接从layui上复制。

    2.4.1 动态生成食品分类下拉框

    1.         /*加载商品分类的下拉框*/
    2.         $.get(
    3.             "${pageContext.request.contextPath}/CategoryServlet/list",
    4.             function (res){
    5.                 if(res.code==0){
    6.                     for (let i = 0; i < res.data.length; i++) {
    7.                         var cate = res.data[i];
    8.                         $("#categoryId").append("+cate.categoryName+"")
    9.                     }
    10.                 }
    11.             },
    12.             "json"
    13.         )

    2.4.2 渲染表单的日期框

    1.         laydate.render({
    2.             elem: "#produceDate"
    3.         })

     使用laydate模块，#produceDate 是对应的input的id

    2.4.3 弹出层

    1.         var goodsFormIndex;
    2.         /*显示弹出层*/
    3.         function showGoodsForm(){
    4.             goodsFormIndex=layer.open({
    5.                 type: 1,
    6.                 skin: 'layui-layer-rim', //加上边框
    7.                 area: ['600px', '400px'], //宽高
    8.                 content: $("#goodsForm")
    9.             });
    10.         }

    goodsFormIndex: layui每一个层调用都会返回一个index，通过这个index可以关闭对应的层；用layer.close(index);

     2.4.5 给表单赋值

    form.val("goodsForm",obj.data);

    其中，goodsForm`是表单对应的 lay-filter的值；

    obj.data是直接获取的触发修改的按钮所在行的全部数据也可以写成[键值对,...]手动赋值，和表单的name 对应。

    2.4.6 表单的重置

    $("#goodsForm")[0].reset();

    0：是唯一的下标，也是不能省略的。 

    2.4.7 表单提交

    1.  /*form表单提交*/
    2.         form.on("submit(goodsBtnSubmit)",function (obj) {
    3.             $.ajax({
    4.                 type:"get",
    5.                 url:$("#actionUrl").val(),
    6.                 data:obj.field,
    7.                 success:function (res) {
    8.                     if(res.code==0){
    9.                         layer.msg("成功");
    10.                         layer.close(goodsFormIndex);
    11.                         $("#goodsForm")[0].reset();
    12.                         //重新加载表格
    13.                         table.reload("goodsTable",{
    14.                             page:{curr:1}
    15.                         })
    16.                     }else {
    17.                         layer.msg("失败");
    18.                     }
    19.                 },
    20.                 dataType:"json"
    21.             })
    22.         })

    固定的写法，其中goodsBtnSubmit是提交按钮的lay-filter ，要注意的是该按钮的type="button" 一定要写，因为button默认是submit，点击后会直接提交表单，导致页面刷新，obj可以随便写；

    通过obj.field可以直接拿到表格中的数据。

  • 相关阅读:
    网页被劫持跳转怎么办？发布网修复方法
    五，修改.hdr插件
    第2关：创建表
    你能想象在亚运赛场打《王者荣耀》吗？
    GD32F103C8T6 PB4 NJTRST引脚当做普通I/O口
    QT日志类SimpleQtLogger的简单记录
    CEO问CIO：数字化运营到底要解决什么问题？
    【TensorFlow1.X】系列学习笔记【入门四】
    Android开发笔记——快速入门（从入门ACT到Fragment放肆）
    [Java、Android面试]_19_单例模式（高频问题）
  • 原文地址：https://blog.csdn.net/m0_71674778/article/details/126254494