1.layui的引入

1.1 本地引入

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

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

引入方式：

 

<!--css-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/Layui/layui-v2.6.8/layui/css/layui.css"    media="all">
<!--js-->
<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文件，能够直接引入，需要联网。

<link rel="stylesheet" href="https://layui.org.cn/res/layui/dist/css/layui.css"    media="all">
<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:

   layui.use(['table','layer','form','laydate'], function(){
        var table = layui.table
            ,form = layui.form
            ,layer = layui.layer
            ,$ = layui.$
            ,laydate = layui.laydate;
        })

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

 2.2 表格

2.2.1  定义一个table

<!--商品数据的表格-->
<div class="layui-container" >
    <table id="goodsTable" lay-filter="goodsTable"></table>
</div>

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

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

 2.2.2 渲染表格

        通过render()方法生成表格

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

title:表格的列名

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

width:该列的宽度；

sort:开启排序

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

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

<!--表头工具条-->
<script type="text/html" id="goodsTableToolbar">
    <div>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="goodsAdd">添加商品</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="goodsDeleteBatch">批量删除</button>
    </div>
</script>
<!--表内行工具条-->
<script type="text/html" id="goodsTableRowToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="goodsEdit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="goodsDelete">删除</button>
    </div>
</script>

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

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

        /*行工具条的点击事件*/
        table.on("tool(goodsTable)",function (obj){
            console.log(obj);
            switch (obj.event){
                case "goodsEdit":
                    $("#goodsForm")[0].reset();
                    $("#actionUrl").val("${pageContext.request.contextPath}/GoodsServlet/update");
                    form.val("goodsForm",obj.data);
                    showGoodsForm();
                    break;
                case "goodsDelete":
                    layer.confirm("确定要删除么?",function (index){
                        deleteGoods(obj.data.goodsId);
                        layer.close(index);
                    })
                    break;
            }
        })

/*给表头工具条绑定事件*/
        table.on("toolbar(goodsTable)",function (obj){
            switch (obj.event) {
                case "goodsAdd":
                    //重置表单内容
                    $("#goodsForm")[0].reset();
                    //设置表单的提交地址
                    $("#actionUrl").val("${pageContext.request.contextPath}/GoodsServlet/add");
                    showGoodsForm();
                    break;
                case "goodsDeleteBatch":
                    var checkStatus = table.checkStatus('goodsTable');
                    var ids = [];
                    for (let i = 0; i < checkStatus.data.length; i++) {
                        ids.push(checkStatus.data[i].goodsId);
                    }
                    layer.confirm("确定要删除么?",function (index){
                        deleteGoods(ids.join(","));
                        layer.close(index);
                    })
                    console.log(checkStatus);
                    break;
            }
        });

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

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

 2.3 layui table的数据格式

2.3.1 请求

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

page:页码

limit:每页的数据数 

2.3.2 响应

        table默认需要的数据格式：

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 

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

msg:提示信息

count:数据数

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

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

public class CommonResult {
    private Integer code;
    private String msg;
    private Integer count;
    private Object data;
    public CommonResult() {
    }
    public CommonResult(Integer code, String msg, Integer count, Object data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }
    public static CommonResult success(){
        return new CommonResult(0,"成功",null,null);
    }
    public static CommonResult success(Integer count,Object data){
        return new CommonResult(0,"成功",count,data);
    }
    public static CommonResult fail(){
        return new CommonResult(1,"失败",null,null);
    }
    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Integer getCount() {
        return count;
    }
    public void setCount(Integer count) {
        this.count = count;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    @Override
    public String toString() {
        return "CommonResult{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }
}

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

 2.4 form 表单

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

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

        /*加载商品分类的下拉框*/
        $.get(
            "${pageContext.request.contextPath}/CategoryServlet/list",
            function (res){
                if(res.code==0){
                    for (let i = 0; i < res.data.length; i++) {
                        var cate = res.data[i];
                        $("#categoryId").append("<option value='"+cate.categoryId+"'>"+cate.categoryName+"</option>")
                    }
                }
            },
            "json"
        )

2.4.2 渲染表单的日期框

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

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

2.4.3 弹出层

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

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 表单提交

 /*form表单提交*/
        form.on("submit(goodsBtnSubmit)",function (obj) {
            $.ajax({
                type:"get",
                url:$("#actionUrl").val(),
                data:obj.field,
                success:function (res) {
                    if(res.code==0){
                        layer.msg("成功");
                        layer.close(goodsFormIndex);
                        $("#goodsForm")[0].reset();
                        //重新加载表格
                        table.reload("goodsTable",{
                            page:{curr:1}
                        })
                    }else {
                        layer.msg("失败");
                    }
                },
                dataType:"json"
            })
        })

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

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