LayUi搜索时,如何只刷新表格内容,其他内容不变?

十点数据 1年前 ⋅ 6531 阅读

相关阅读:

Spring Boot 踩坑系列之Error resolving template

Maven项目中引入net.sf.json.JSONObject依赖jar包

X-admin2.2表单提交方式及注意事项

X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作

Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法

ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台

最近在基于SpringBoot+Frammark+X-admin2.2框架,开发一套自己的后台框架,其中部门管理部分涉及到ZTree和LayUi动态表格结合使用的场景。

同时发现LayUi表格上方的搜索框在回车或点击搜索按钮时,是刷新整个页面,而不是表格。这样就导致左侧树节点选择状态消失,虽然可以想办法解决,不过太麻烦了。最后决定改变默认的监控。 demo.png

步骤如下:

1:修改搜索按钮标签:

<#input type="text" id="name" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">

<span class="layui-btn" id="searchBtn"> <i class="iconfont">#&#xe6ac;</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;
            }
        };
 });

这样就可以在搜索时,只是重新刷新表格内容,其他部分数据不变化。

全部评论: 0

    我有话说: