ztree 樹的模糊搜索

（轉載），有個坑記錄下：

(原文)實現類似下面這種：

/**
 * 展開樹
 * @param treeId
 */
function expand_ztree(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    treeObj.expandAll(true);
}

/**
 * 收起樹：只展開根節點下的一級節點
 * @param treeId
 */
function close_ztree(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    console.log(JSON.stringify(nodes));
    var nodeLength = nodes.length;
    for (var i = 0; i < nodeLength; i++) {
        //console.log(nodes[i].id);
        if (nodes[i].id == '0') {
            //console.log('根節點：展開'+JSON.stringify(nodes[i]));
            //根節點：展開
            treeObj.expandNode(nodes[i], true, true, false);
        } else {
            //非根節點：收起
            //console.log('非根節點：收起'+JSON.stringify(nodes[i]));
            treeObj.expandNode(nodes[i], false, true, false);
        }
    }
}

/**
 * 搜索樹，高亮顯示並展示【模糊匹配搜索條件的節點s】
 * @param treeId
 * @param searchConditionId 文本框的id
 */
function search_ztree(treeId, searchConditionId) {
    searchByFlag_ztree(treeId, searchConditionId, "");
}

/**
 * 搜索樹，高亮顯示並展示【模糊匹配搜索條件的節點s】
 * @param treeId
 * @param searchConditionId        搜索條件Id
 * @param flag                    需要高亮顯示的節點標識
 */
function searchByFlag_ztree(treeId, searchConditionId, flag) {
    //<1>.搜索條件
    var searchCondition = $('#' + searchConditionId).val().trim();
    //<2>.得到模糊匹配搜索條件的節點數組集合
    var highlightNodes = new Array();
    if (searchCondition != "") {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
    }
    //<3>.高亮顯示並展示【指定節點s】
    highlightAndExpand_ztree(treeId, highlightNodes, flag);
}

/**
 * 高亮顯示並展示【指定節點s】
 * @param treeId
 * @param highlightNodes 需要高亮顯示的節點數組
 * @param flag             需要高亮顯示的節點標識
 */
function highlightAndExpand_ztree(treeId, highlightNodes, flag) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //<1>. 先把全部節點更新爲普通樣式
    var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < treeNodes.length; i++) {
        treeNodes[i].highlight = false;
        treeObj.updateNode(treeNodes[i]);
    }
    //<2>.收起樹, 只展開根節點下的一級節點
    close_ztree(treeId);
    //<3>.把指定節點的樣式更新爲高亮顯示，並展開
    if (highlightNodes != null) {
        for (var i = 0; i < highlightNodes.length; i++) {
            if (flag != null && flag != "") {
                if (highlightNodes[i].flag == flag) {
                    //高亮顯示節點，並展開
                    highlightNodes[i].highlight = true;
                    treeObj.updateNode(highlightNodes[i]);
                    //高亮顯示節點的父節點的父節點....直到根節點，並展示
                    var parentNode = highlightNodes[i].getParentNode();
                    var parentNodes = getParentNodes_ztree(treeId, parentNode);
                    treeObj.expandNode(parentNodes, true, false, true);
                    treeObj.expandNode(parentNode, true, false, true);
                }
            } else {
                //高亮顯示節點，並展開
                highlightNodes[i].highlight = true;
                treeObj.updateNode(highlightNodes[i]);
                //高亮顯示節點的父節點的父節點....直到根節點，並展示
                var parentNode = highlightNodes[i].getParentNode();
                var parentNodes = getParentNodes_ztree(treeId, parentNode);
                treeObj.expandNode(parentNodes, true, false, true);
                treeObj.expandNode(parentNode, true, false, true);
            }
        }
    }
}

/**
 * 遞歸得到指定節點的父節點的父節點....直到根節點
 */
function getParentNodes_ztree(treeId, node) {
    if (node != null) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var parentNode = node.getParentNode();
        return getParentNodes_ztree(treeId, parentNode);
    } else {
        return node;
    }
}

/**
 * 設置樹節點字體樣式
 */
function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
        //根節點
        return {color: "#333", "font-weight": "500"};
    } else if (treeNode.isParent == false) {
        //葉子節點
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#660099",
            "font-weight": "normal"
        };
    } else {
        //父節點
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }
}

說明：

1、 setFontCss_ztree 是在 zTree的配置開頭定義setting的時候使用：

view: { 
    showIcon: false, 
    selectedMulti: false, 
    nameIsHTML: true, 
    fontCss: setFontCss_ztree 
},

2、 使用的時候注意 在 close_ztree方法裏：

if (nodes[i].id == '0') {
    //根節點：展開
    treeObj.expandNode(nodes[i], true, true, false);
} else {
    //非根節點：收起
    treeObj.expandNode(nodes[i], false, true, false);
}

這裏的 nodes[i].id == ‘0’ 是判斷數據中的根節點的id爲0的，如果搜索的時候無法正常展開/收縮，或者錯位問題，請檢查根節點的id是否爲0，如果使用的數據格式沒有id=0的根節點，請把條件修改成判斷根節點的條件。