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