layui 表格前后端总结

@PostMapping("findAll")
    @ResponseBody
    public Layui findAll(Param param){
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
        Page<EduTeacher> page = new Page<>(param.getPage(),param.getLimit());

        if(param.getA() != null && param.getA() != "") {
            wrapper.eq("name",param.getA());
        }

        eduTeacherService.page(page,wrapper);
        //List<EduTeacher> list = eduTeacherService.list(wrapper);
        List<EduTeacher> records = page.getRecords();
        long total = page.getTotal();
        Layui data = Layui.data(Math.toIntExact(total),records);
        return data;
    }

    @PostMapping("delete")
    @ResponseBody
    public String delete(@RequestBody Param param){
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
        if(param.getName() != null && param.getName() != "") {
            wrapper.eq("name",param.getName());
        }
        boolean result = eduTeacherService.remove(wrapper);
        return "delete success";
    }

　　

layui工具类

package com.baomidou.springboot.util;

import java.util.HashMap;
import java.util.List;

public class Layui  extends HashMap<String, Object> {

    public static Layui data(Integer count, List<?> data){
        Layui r = new Layui();
        r.put("code", 0);
        r.put("msg", "");
        r.put("count", count);
        r.put("data", data);
        return r;
    }
}

　　

html

<form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
            </div>
            <input type="text" name="C" readonly placeholder="Field C" class="layui-input demo-table-search-date">
        </div>
    </div>
    <div class="layui-btn-container layui-col-xs12">
        <button class="layui-btn" lay-submit lay-filter="demo-table-search" id="search">Search</button>
        <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
    </div>
</form>
<table class="layui-hide" id="ID-table-demo-search"></table>

　　表格渲染重载

layui.use(function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: 'http://localhost:8001/findAll', // 此处为静态模拟数据，实际使用时需换成真实接口
            method: 'post',
            cols: [[
                {type: 'radio', title: '😊', fixed: true}, // 单选框
                {field:'id', title: 'ID', width:280, sort: true, fixed: true},
                {field:'name', title: '用户名', width:180},
                {field:'intro', title: '性别', width:280, sort: true},
                {field:'career', title: '城市', width:280},
                {field:'level', title: '签名',width:280},
                {field:'gmtCreate', title: '积分', sort: true, width:280},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]],
            page: {
                curr: 1
            },

        });

        //监听行工具事件
        table.on('tool(ID-table-demo-search)', function(obj){
            var row = obj.data;
            //data 表示的是本行的数据，可以获取其属性的值
            if(obj.event === 'del'){
                debugger
                layer.confirm('确认删除' + row.name + "吗？", {icon: 3, title:'提示'}, function(index){

                    $.post({
                        url: 'http://localhost:8001/delete',
                        data: JSON.stringify({name: row.name}),
                        contentType: 'application/json;charset=utf-8',
                        success: function(res) {

                            $('#search').trigger("click");
                            console.log(res);
                        },
                        error: function(xhr, status, error) {
                            alert("没掉")
                            console.log(xhr);
                            console.log(status);
                            console.log(error);
                        }
                    });



                    layer.close(index);
                });

            } else if(obj.event === 'edit'){
                //layui的弹出层
                layer.prompt({
                    formType: 0
                    //输入框类型，支持0（文本）默认1（密码）2（多行文本）
                    ,value: data.adminPassword
                    ,title: '修改主题'
                }, function(value, index){
                    location.href="AdminServlet?method=update&newpass="+value+"&uid="+data.adminId;
                });
            }
        });


        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function(data){

            debugger
            var defaulPage = 1
　　　　　　　// 获取当前页码如果存在就赋值，不存在默认取第一页
            var htmlContent = $(".layui-laypage-curr em").text();

            if(htmlContent) {
                defaulPage = htmlContent
            }
            console.log("页码",defaulPage)
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                page: {
                    curr: defaulPage 
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });

　　表格行里面的操作列：

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <!-- 添加在每一行的编辑处的两个按钮 -->
</script>