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