终于弄懂了Layui表格重载数据
时间:2022-07-22
本文章向大家介绍终于弄懂了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();
}
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android 实现将Bitmap 保存到本地
- Android Gradle依赖管理、去除重复依赖、忽略的方式
- Andriod Studio实现保存QQ密码功能(案例代码详解)
- Android Studio编写微信页面提交功能
- android 实现按钮浮动在键盘上方的实例代码
- 创建Android守护进程实例(底层服务)
- android studio xml文件实现添加注释
- 解决Android studio xml界面无法预览问题
- Android Studio通过Artifactory搭建本地仓库优化编译速度的方法
- Android实现向本地写入一个XML文件和解析XML文件
- Android自定义View实现带4圆角或者2圆角的效果
- Android 在 res/layout 文件夹 下创建一个 子文件夹实例
- Android开发实现TextView超链接5种方式源码实例
- Android根据包名停止其他应用程序的方法
- Android APP存活检测方式