相关阅读:
Spring Boot 踩坑系列之Error resolving template
Maven项目中引入net.sf.json.JSONObject依赖jar包
X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作
Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法
ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台
最近在基于SpringBoot+Frammark+X-admin2.2框架,开发一套自己的后台框架,其中部门管理部分涉及到ZTree和LayUi动态表格结合使用的场景。
同时发现LayUi表格上方的搜索框在回车或点击搜索按钮时,是刷新整个页面,而不是表格。这样就导致左侧树节点选择状态消失,虽然可以想办法解决,不过太麻烦了。最后决定改变默认的监控。
步骤如下:
1:修改搜索按钮标签:
<#input type="text" id="name"
name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
<span class="layui-btn" id="searchBtn"> <i class="iconfont">#</i> </span>
2:添加监听数据库回车、搜索“按钮”
layui.use('table', function() {
var table = layui.table;
var isSearch = false;
//输入框回车执行搜索
$("#name").bind('keydown', function(event) {
if (event.keyCode == 13) {
nodeId = getNodeId()
table.reload("test", { // 此处是上文提到的 初始化标识id
where : {
name : $('#name').val(),
nodeId : nodeId
}
});
isSearch = true;
return false;
}
});
//点击搜索按钮执行搜索
$("#searchBtn").bind('click', function(event) {
nodeId = getNodeId()
table.reload("test", { // 此处是上文提到的 初始化标识id
where : {
name : $('#name').val(),
nodeId : nodeId
}
});
isSearch = true;
return false;
});
//监听搜索变化
var keyWord = document.getElementById("name");
keyWord.oninput = function(e) {
if (keyWord.value === '' || keyWord.value === null) {
if (isSearch) {
nodeId = getNodeId()
table.reload("test", { // 此处是上文提到的 初始化标识id
where : {
name : $('#name').val(),
nodeId : nodeId
}
});
}
isSearch = false;
}
};
});
这样就可以在搜索时,只是重新刷新表格内容,其他部分数据不变化。