需求
学末将至,
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 : '[email protected]' }
打印出来是这种形式的:
后台返回的对象是这种形式的:
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();
}