jstree使用【三】根據節點型別更換節點圖示
阿新 • • 發佈:2019-01-22
樹節後前面不同的icon可以很方便很明確的告訴我們這個結點的型別或者其他的什麼。
我做的專案裡面這顆樹狀圖是一顆車輛樹,包括根節點,公司,下級公司,車組,以及車輛。為了考慮瀏覽器載入的效能問題,這棵樹是採用非同步載入,第一次載入的時候僅載入公司等類似於資料夾型別的結點,並不載入含有車輛的結點。
$('#jstree_vehicle').jstree({
"types": {//1為公司,2為子公司,3為車組,4為車輛
"1": {
"valid_children": ["2", "3", "4" ],
"icon": "jstree-folder"
},
"2": {
"icon": "jstree-folder",
"valid_children": ["2", "3", "4"]
},
"3": {
"icon": "jstree-folder",
"valid_children" : ["3", "4"]
},
"4": {
"icon": "jstree-node-online"
}
},
"plugins": ["types"]/
}).on("load_node.jstree",function(e,d){
var nodes=d.node.children_d;
for(var i in nodes){
var node=d.instance.get_node(nodes[i]);
if(node.type=="4"){
var _node=node.original;
vehicleTree.set_icon(node,"jstree-node-offline");
(_node.isOnline=="true")&&vehicleTree.set_icon(node,"jstree-node-online");
}
}
});
由於是非同步載入車輛的實時資訊,我並不是只要知道節點的型別就可以了,還要根據型別獲取他的離線線上資訊。而這些資訊在非同步獲取資料的時候都已經返回回來了。在結點物件的node.original中,有從後臺傳過來的所有資訊。
我通過這個物件得到該結點的isOnline資訊。
如果isOnline物件為線上,那麼就將節點的圖示改為“jstree-node-online”,方法如下:
//jstree-node-online 是自定義的圖示css
.jstree-default .jstree-node-online {
background: url("/image/treeicon/24/online24.gif") no-repeat;
}
//修改圖示的方法
vehicleTree.set_icon(node,"jstree-node-online")
“load_node.jstree”是載入節點時會呼叫的事件,不管是初次載入還是非同步載入都會呼叫。