zTree實現模糊搜尋並高亮顯示
阿新 • • 發佈:2019-01-30
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);
}
}