终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)

需求

学末将至,web应用技术这门课最后要交一个大作业。开发一个购物的商城网站(编程语言不限制,系统架构不限制,总之开发出来带有前后台的购物商城并且带支付功能)。在开发用户管理的功能的时候,需要用到表格展示数据。

其中前端的UI采用了Layui。

就在开发到数据表格相关功能的时候,却遇到了问题。

网络大多数都是A转Layui官网实例,B转A,C转B。导致了搜一个解决的办法,就是错误,再搜一个还是错的。几乎都不能解决。

折腾了将近10多个小时。最终折腾成功,特此把遇到的坑写在文章里,为后人提供点帮助。

在这里插入图片描述

被Layui伤透了的心

被女朋友劝用Ajax:
在这里插入图片描述

那不行呀,我就不信搞不明白了:

不能向这个小问题低头,这次低头了下次遇到了,麻烦的还是自己。还是下决定把这个整明白。

在这里插入图片描述

遇到的问题描述

后台怎么都收不到传来的值。
在这里插入图片描述

在这里插入图片描述

涨姿势环节

1、page和limit参数

首先呢,我这样写,是错误的。
在Layui的重载表格中,会自动向请求的地址发出page和limit参数,所以不必在写page和limit参数了。

终于体会到了作者设计此处时的奇妙和厉害之处。

省的使用者再去计算page和limit的值,layui都帮你计算好了。

在这里插入图片描述

2、layui重载方法中的where传参之坑

官方的例子给出的实例如下代码所示,但是实例中未说明为什么这样子写。

where: {
    key: {
        id: demoReload.val()
    }
}

这也是我受到伤害的其中一个地方,其实这个地方,作者是想传递一个对象。
我们之后在js中的对象是可以这样写:

var User = {
   name : ‘郑晖’,
   email : '123@163.com'
}

打印出来是这种形式的:
在这里插入图片描述
后台返回的对象是这种形式的:
在这里插入图片描述

var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
            id: demoReload.val()
          }
        }
      }, 'data');
    }
  };

根据对比,作者就是想返回一个对象给后台。所以这个地方就需要自定义了。
总之,where:{}中就是用来存放向后台传的值的。

解决问题

为了解决这个问题,我试了几种办法,

data.field拿到的数据就是一个表单中的input中的值,形成一个对象的形式,可以打印一下看一下格式:
在这里插入图片描述

编写的js代码:

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
   //执行搜索重载
   table.reload('currentTableId', {
       url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
       method:'post',
       page: {
           curr: 1
       }
       , where: data.field

   }, 'data');

   return false;
});

但是遇到了问题:(后台接收不到值:

前台可以看到是可以看到值传过去了:
在这里插入图片描述
后台确实也收到了:
在这里插入图片描述

由于后台需要动态的拼接sql:
在这里插入图片描述
前台会把所有的字段都传递给后端,即使没有搜索也会传一个' '进来。导致了后台去查询了传来的' ',这个地方可以通过后端来处理。这里我就尝试这去使用前端来处理,所以不讨论后端。

** 解决办法1(没有成功的解决)**

 // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('currentTableId', {
                url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                method:'post',
                page: {
                    curr: 1
                }
                , where:

            {
                managerId:data.field.managerId != '' ? data.field.managerId:null,
                    managerName:data.field.managerName != '' ? data.field.managerName:null,
                username:data.field.username != '' ? data.field.username:null,
                age:data.field.age != '' ? data.field.age:null,
                sex:data.field.sex != '' ? data.field.sex:null,
                phone:data.field.phone != '' ? data.field.phone:null,
                email:data.field.email != '' ? data.field.email:null,
                start:data.field.start != '' ? data.field.start:null,
                createDateStr:data.field.createDateStr != '' ? data.field.createDateStr:null
            }

            }, 'data');

            return false;
        });

** 解决办法2(成功的解决)**

前端动态的添加对象中的字段

 // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {

            // 装载数据
            var resultData = {};
            if(data.field.managerId != '' )
              resultData.managerId = data.field.managerId;
            if(data.field.managerName != '' )
                resultData.managerName = data.field.managerName;
            if(data.field.username != '' )
                resultData.username = data.field.username;
            if(data.field.age != '' )
                resultData.age = data.field.age;
            if(data.field.sex != '' )
                resultData.sex = data.field.sex;
            if(data.field.phone != '' )
                resultData.phone = data.field.phone;
            if(data.field.email != '' )
                resultData.email = data.field.email;
            if(data.field.start != '' )
                resultData.start = data.field.start;
            if(data.field.createDateStr != '' )
                resultData.createDateStr = data.field.createDateStr;

            //执行搜索重载
            table.reload('currentTableId', {
                url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                method:'post',
                page: {
                    curr: 1
                }
                , where:resultData

            }, 'data');

            return false;
        });

前端所有代码:

<!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">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
</head>

<style>
    #layui-table-page1{
        text-align: center;
    }
</style>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="managerId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="managerName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-inline">
                                <input type="text" name="age" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">是否启用</label>
                            <div class="layui-input-inline">
                                <input type="text" name="start" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">创建日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDateStr" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
<!--                            lay-submit-->
                            <button type="submit"  class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加管理员 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除管理员 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            // url: 'api/managerAdminTable.json',
            url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
            method:'post',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: '3%',align: "center"},
                {field: 'managerId', width: '10%', title: '编号', sort: true,align: "center"},
                {field: 'managerName', width: '10%', title: '用户名',align: "center"},
                {field: 'userName', width: '10%', title: '姓名', sort: true,align: "center"},
                {field: 'age', width: '17%', title: '年龄',align: "center"},
                {field: 'sex', width: '10%', title: '性别', sort: true,align: "center"},
                {field: 'createDateStr', width: '10%', title: '创建日期', sort: true,align: "center"},
                {field: 'start', width: '10%', title: '是否启用', sort: true,align: "center"},
                {title: '操作', width: '20%', toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            done : function(res, curr, count){
                console.log("共有数据:"+count+" 条")
                // $('#totalProjectNumber').text("共有数据:"+count+" 条");
                table_data=res.data;
                layer.closeAll('loading');
                // layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
                // layer.close(index);    //返回数据关闭loading
            }

        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {

            // 装载数据
            var resultData = {};
            if(data.field.managerId != '' )
              resultData.managerId = data.field.managerId;
            if(data.field.managerName != '' )
                resultData.managerName = data.field.managerName;
            if(data.field.username != '' )
                resultData.username = data.field.username;
            if(data.field.age != '' )
                resultData.age = data.field.age;
            if(data.field.sex != '' )
                resultData.sex = data.field.sex;
            if(data.field.phone != '' )
                resultData.phone = data.field.phone;
            if(data.field.email != '' )
                resultData.email = data.field.email;
            if(data.field.start != '' )
                resultData.start = data.field.start;
            if(data.field.createDateStr != '' )
                resultData.createDateStr = data.field.createDateStr;

            //执行搜索重载
            table.reload('currentTableId', {
                url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                method:'post',
                page: {
                    curr: 1
                }
                , where:resultData

            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/table/add.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/table/edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script>



</body>
</html>

后端相关代码:

为了方便其他人看,没加入任何其他的无关的代码,仅供参考,单纯为了实现传值

   @ResponseBody
    @PostMapping("/list")
    public String list(Integer page, Integer limit, ManagerUser managerUser){
        List<ManagerUser> userListAll = managerUserService.getManagerUserListAll(managerUser);

        JSONObject json = new JSONObject();
        json.put("code",0);
        json.put("msg","数据加载成功");
        json.put("count",userListAll.size());
        json.put("data",userListAll);

        return json.toString();
    }
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读