zTree是一個常用的樹外掛，本身對搜尋功能封裝的不是太完美，為了實現下列效果我對其進行了二次封裝。

首先，在定義tree時我們將它高亮和普通顯示的樣式定義好。

        var setting = {
            view: {
                fontCss: function (treeId, treeNode) {
                    return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
                            color: "#fff"
 
, "font-weight": "normal"
                        };
                }
            }
        };
        var zNodes = [
            {id:1,name: "陽光小區", children: [
                {id:1,name: "ygxq001"},
                {id:2,name: "ygxq002"}
            ]},
            {id:2,name: "聚點小區", children: [
                {id
 
:3,name: "jdxq001"},
                {id:4,name: "jdxq002"}
            ]}
        ];
        $.fn.zTree.init($("#deviceTree"), setting, zNodes);

主要用到了fontCss屬性，設定通過每個樹節點的highlight屬性來判斷其是否高亮。

然後我們定義一個全域性變數（這樣就可以獲取上次的查詢結果以消除上次查詢的高亮）oldNodes來儲存查詢到的樹節點。

var oldNodes = [];

查詢函式：

function searchNode
 
 (textid) {
            var text = $("#"+textid).val();
            if (text == "") {
                return;
            }
            var treeObj = $.fn.zTree.getZTreeObj(myTree);
            updateNodes(false);
            oldNodes = treeObj.getNodesByParamFuzzy("name", text, null);
            updateNodes(true);
        }

function updateNodes (flag) {
            //遍歷搜尋高亮顯示
            var treeObj = $.fn.zTree.getZTreeObj("myTree");
            for (var i = 0, l = myVue.oldNodes.length; i < l; i++) {
                oldNodes[i].highlight = flag;
                treeObj.updateNode(oldNodes[i]);
                treeObj.expandNode(oldNodes[i].getParentNode(), flag, null, null, false);
            }
        }