Ztree前端搜索筛选操作

lxyforever5

于 2023-04-13 17:05:42 发布

阅读量1.3k

点赞数

文章标签：前端 javascript ztree模糊查询

本文链接：https://blog.csdn.net/lxyforever5/article/details/130134655

版权

该文章描述了一个使用HTML、JavaScript和ztree库实现的关键字搜索功能。当用户在输入框输入搜索词后，代码会遍历树形结构的各个层级，通过模糊匹配显示匹配的节点并隐藏不匹配的节点，从而实现树状数据的筛选。

摘要由CSDN通过智能技术生成

1.进行关键字搜索，界面代码

<div class="form-group">
     <input type="text" class="form-control" name="txtName" id="txtName" placeholder="输入搜索关键字">
     <i class="searchTreeBtn fa fa-search" id="search"></i>
</div>

2.js的处理

  //查询。通过节点名进行模糊查询
    $(".searchTreeBtn").click(function () {
        var name = $("#txtName").val();//分支名
        if (name == "") {
            //初始化树(是否显示复选框)
            initTree(false, addDiyDom);
            return;
        }
        searchTree(name);//筛选事件
    });

3.ztree的筛选事件

//搜索，以四层为例，这种不好的地方就是需要每层进行处理，如果层级多了就可能过于繁琐了
    function searchTree(name) {
        var treeObj = $.fn.zTree.getZTreeObj("tree");//tree为存放树状的id
        //先显示所有节点
        var nodes = treeObj.getNodesByParam("isHidden", true);
        treeObj.showNodes(nodes);
        //通过模糊查询需要展示的节点
        var nodeSearch = treeObj.getNodesByParamFuzzy("Name", name, null);
        //四层,获取需要隐藏的四层信息
        var fourNodes = treeObj.getNodesByParam("Level", 4);
        for (var i = 0; i < fourNodes.length; i++) {
            var isContain = false;
            for (var j = 0; j < nodeSearch.length; j++) {
                if (fourNodes[i].Name == nodeSearch[j].Name) {
                    isContain = true;
                    break;
                }
            }
            if (isContain == false) {
                treeObj.hideNode(fourNodes[i])
            }
         }
        
        
        //隐藏三层
        var threeNodes = treeObj.getNodesByParam("Level", 3);
        for (var i = 0; i < threeNodes.length; i++) {
            var isContain = false;
            var children = threeNodes[i].Children;
            if (children && children.length>0) {
                for (var j = 0; j < children.length; j++) {
                    for (var n = 0; n < nodeSearch.length; n++) {
                        if (threeNodes[i].Name == nodeSearch[n].Name 
                           || !children[j].isHidden) {
                            isContain = true;
                            break;
                        }
                    }
                }
            } else {
                for (var n = 0; n < nodeSearch.length; n++) {
                    if (threeNodes[i].Name == nodeSearch[n].Name) {
                        isContain = true;
                        break;
                    }
                }
            }
            if (isContain == false) {
                treeObj.hideNode(threeNodes[i])
            }
        }
        //隐藏二层
        var twoNodes = treeObj.getNodesByParam("Level", 2);
        for (var i = 0; i < twoNodes.length; i++) {
            var isContain = false;
            var children = twoNodes[i].Children;
            if (children && children.length > 0) {
                for (var j = 0; j < children.length; j++) {
                    for (var n = 0; n < nodeSearch.length; n++) {
                        if (twoNodes[i].Name == nodeSearch[n].Name 
                           || !children[j].isHidden) {
                            isContain = true;
                            break;
                        }
                    }
                }
            } else {
                for (var n = 0; n < nodeSearch.length; n++) {
                    if (twoNodes[i].Name == nodeSearch[n].Name) {
                        isContain = true;
                        break;
                    }
                }
            }
            
            if (isContain == false) {
                treeObj.hideNode(twoNodes[i])
            }
        }

        //隐藏一层
        var oneNodes = treeObj.getNodesByParam("Level", 1);
        for (var i = 0; i < oneNodes .length; i++) {
            var isContain = false;
            var children = oneNodes[i].Children;
            if (children && children.length > 0) {
                for (var j = 0; j < children.length; j++) {
                    for (var n = 0; n < nodeSearch.length; n++) {
                        if (oneNodes[i].Name == nodeSearch[n].Name 
                            || !children[j].isHidden) {
                            isContain = true;
                            break;
                        }
                    }
                }
            } else {
                for (var n = 0; n < nodeSearch.length; n++) {
                    if (oneNodes[i].Name == nodeSearch[n].Name) {
                        isContain = true;
                        break;
                    }
                }
            }
            
            if (isContain == false) {
                treeObj.hideNode(oneNodes[i])
            }
        }
    }