zTree实现模糊搜索并高亮显示

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