树节后前面不同的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”是加载节点时会调用的事件,不管是初次加载还是异步加载都会调用。