zTree模糊搜索(子级和父级都不匹配时隐藏节点)

具体效果见上图。

具体代码

以下代码是基于Vue编写的。

Html部分

<div class="search-box clearfix">
    <a-input placeholder="请输入搜索关键词..." v-model="key" @keyup.enter="searchDev" />
    <a-button @click="searchDev">搜索</a-button>
</div>
<div class="device-list">
    <div class="ztree radio-ztree" id="deparment-ztree"></div>
</div>
           

Js部分

// tree基础配置
var treeOpts = {
    view: {
        showLine: false,
        dblClickExpand: false,
        showIcon: function showIcon(treeId, treeNode){
            return !treeNode.isParent;
        }
    },
    check: {
        enable: false,
    },
    callback: {}
};

//设备树渲染方法，treeData由接口获得并传入到方法中
renderDeptTree(treeData){
	var el = 'deparment-ztree'
    var treeObj;

    try{
        $.fn.zTree.getZTreeObj(el).destroy();
    } catch(error){}

    // 添加自定义Dom
    function addDiyDom(treeId, treeNode){
        if(treeNode.type == 'DEPT'){ // 添加统计数值
            var aObj = $("#" + treeNode.tId + "_a");
            var count = treeNode.total;
            var str = '<div class="count-box">(<span class="count">' + count[0] + '</span>/<span class="online">' + count[1] + '</span>/<span class="downline">' + count[2] + '</span>)</div>';
            aObj.append(str);
        } else if(treeNode.type == 'DEV'){ // 添加收藏按钮
            var aObj = $("#" + treeNode.tId + "_a");
            var str = '';
            if(treeNode.gzzt == '0'){
                str = $('<span class="setfavorite addfavorite"><i class="icon material-icons">' + heart + '</i></span>');
            } else if(treeNode.gzzt == '1'){
                str = $('<span class="setfavorite removefavorite"><i class="icon material-icons">' + solidHeart + '</i></span>');
            }
            aObj.append(str);
        }
    }

    // 基本配置
    treeOpts.view.addDiyDom = addDiyDom;

    // 点击事件
    treeOpts.callback.beforeClick = function(treeId, treeNode, clickFlag){
        if(treeNode.type == 'DEPT'){
            if(treeNode.open){ // 点击父级展开或者收起子级
                $.fn.zTree.getZTreeObj(el).expandNode(treeNode, false, false, false);
            } else{
                $.fn.zTree.getZTreeObj(el).expandNode(treeNode, true, false, true);
            }
            return false;
        } else{
            return true;
        }
    }
    treeOpts.callback.onClick = function(event, treeId, treeNode){
        // 点击父级展开子级
        treeObj.expandNode(treeNode);
        if(treeNode.type == 'DEV'){
            // 设置设备编号
            self.sbbh = treeNode.id;

            // 子页面方法调用
            document.getElementById("liveview").contentWindow.window.page.init(treeNode.id);
            }
        } else{
            return false;
        }
    }
    
    $.fn.zTree.init($("#" + el), treeOpts, treeData);
    treeObj = $.fn.zTree.getZTreeObj(el);
},
// 搜索设备
searchDev(){
    var self = this;
    var el = 'deparment-ztree';
    var key = self.key;
    var nodeList;
    zTreeObj = $.fn.zTree.getZTreeObj(el);
    var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());
    
    // 查找节点
    function filterFunc(node) {
        if(node.name.indexOf(key) != -1){
            return true;
        } else{
            return false;
        }
    };

    // 查找父级
    function findParent(zTreeObj, node) {
        zTreeObj.expandNode(node, true, false, false);
        var pNode = node.getParentNode();
        if (pNode != null) {
            nodeList.push(pNode);
            findParent(zTreeObj, pNode);
        }
    };

    // 隐藏所有节点
    zTreeObj.hideNodes(allNode);

    // 根据关键词搜索
    if(key){
        nodeList = zTreeObj.getNodesByFilter(filterFunc);
        nodeList = zTreeObj.transformToArray(nodeList);
        for (var n in nodeList) {
            if (nodeList.hasOwnProperty(n)){
                findParent(zTreeObj, nodeList[n]);
            }
        }
        zTreeObj.showNodes(nodeList);
    } else{ // 搜索关键词为空时展示所有节点且收起所有节点
        zTreeObj.showNodes(allNode);
        zTreeObj.expandAll(false);
    }
},