需求
学末将至，
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(); }
