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);
    }
},