【javascript】ztree插件实现树节点检索功能

功能需求,实现树节点检索,多次检索时将上次结果折叠,只展开显示当前搜索内容节点

需要脚本:jquery.ztree.all-3.5.js,jquery.ztree.exhide-3.5.js(插件Demo下载地址:zTree_v3: jQuery 树插件 zTree v3 系列) 

核心方法:

    var hisNodeList = [];//历史搜索节点
//通过输入内容检索节点,names:输入内容,target为目标DOM
        function searchNodesByName (target, names) {
            var id = target.attr("id");
            var eleTreeId = id + "_tree";
            var zTreeObj = $.fn.zTree.getZTreeObj(eleTreeId);//通过DOM id获取ztree对象

            //console.log('zTreeObj', zTreeObj);
            var nodes = zTreeObj.getNodes();//获取所有树节点
            //zTreeObj.expandAll(false);//折叠所有节点,但功能有BUG,未验证是否是数据过多导致
            if (names == null || names === '') {//如果输入内容为空,则显示所有节点
                console.log('输入内容为空')
                zTreeObj.showNodes(nodes);//显示所有节点
            } else {//如果输入内容不为空
                //console.log('zTreeObj-', zTreeObj);
                zTreeObj.hideNodes(nodes);//隐藏所有节点

                var searchNodes = zTreeObj.getNodesByParamFuzzy('name', names);//通过检索内容检索节点,获取匹配的节点数组
                
                if (hisNodeList.length > 0) {//当历史节点内容不为空时,循环折叠历史节点内容
                    hisNodeList.forEach(function (hisNode) {
                        zTreeObj.expandNode(hisNode, false, true);
                    });
                }
                hisNodeList = searchNodes;//将当前匹配的节点内容保存,在第二次搜索时折叠当前搜索到的节点内容
                searchNodes.forEach(function (node) {

                    while (true) {//循环获取节点父级,并将其展开

                        //console.log('while------------node', node);
                        if (!node.parentTId) {//如果节点父级为空,说明是省级节点,展开当前节点并跳出循环
                            zTreeObj.expandNode(node, true, false);

                            break
                        }
                        var parentNode = zTreeObj.getNodeByTId(node.parentTId);//通过父级ID获取父节点
                        if (!parentNode.open) {//如果当前父级节点open属性为false,设置为true
                            parentNode.open = true;
                        }
                        //console.log('while------------parentNode', parentNode);
                        zTreeObj.expandNode(node, true, false);//展开当前节点
                        if (node.isHidden) {//如果当前节点isHidden属性为true,说明当前节点未显示,显示当前节点
                            zTreeObj.showNode(node);
                        }

                        node = parentNode;//将父节点赋值给当前节点继续循环
                    }
                    //通过当前节点获取当前节点下的子节点,并循环。通过父级遍历后当前节点一般为省级节点
                    var childrenNodes = zTreeObj.transformToArray(node);
                    childrenNodes && childrenNodes.forEach(function (node) {
                        if (node.isHidden) {//如果当前节点isHidden属性为true,说明当前节点未显示,显示当前节点
                            zTreeObj.showNode(node);
                        }                 
                    });
                });
            }
        }

注意:如果hideNodes,showNodes,showNode方法报错,一般为未加载jquery.ztree.exhide-3.5.js脚本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值