最近的项目用到了jstree，因为对官方文档理解不充分，所以很多功能都是在网站上搜索再进行使用的。（我只是大自然的搬运工）
- 对每一级的节点，右键后出现不同的结果。
在jstree中右键是由 contextmenu 实现的，所以我们需要自定义它。在这之前要在 plugins 中添加它。"plugins": ["contextmenu"]。
然后定义个函数
function contextItem(node) {
let items = {
'item1': {
"增加地点": {
"label": "增加地点",
"action": function (data) {
let inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
inst.edit(new_node);
});
}
}
},
'item2': {
"删除地点": {
"label": "删除地点",
"action": function (data) {
let inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if (confirm("确定要删除此菜单？删除后不可恢复。")) {
inst.delete_node(obj);
}
}
},
"修改地点": {
"label": "修改地点",
"action": function (data) {
let inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
}
},
'item3': {
"create": null,
"rename": null,
"remove": null,
"ccp": null
}
};
if (node.type === '1_level') {
items = items.item1;
} else if (node.type === '2_level') {
items = items.item2;
} else {
items = items.item1;
}
// console.log(node.parent.length);
return items;
}
最后只要把定义好的函数引用在contextmenu中就好了。
"contextmenu": {
"items": contextItem,
},
2.实现每个节点懒加载（点到相应的节点才会发送ajax到后台，获取相应数据）。如下图
在jstree中
core:{
data:DataLoader
}
定义了DataLoader函数。
function DataLoader(node, render) {
if (node.id === '#') { // 对于根节点来说，加载一级的地区目录
render(FakeAjaxLoadLevel1())
} else if (node.data) { //判断依据可以用户自定义
switch (node.data.level) {
case 1:
render(FakeAjaxLoadLevel2(node.text)); // 对于一级的地区目录来说，加载相应的市级
break;
case 2:
render(FakeAjaxLoadLevel3(node.text)); // 对于二级的市级来说，加载相应的辖区
break;
}
}
}
每一节点的函数返回jstree中所需的属性，以第一级为例
function FakeAjaxLoadLevel1() {
return [
{
text: '华东地区', id: 1, children: true,
data: {
level: 1
}
},
{
text: '华中地区', id: 2, children: true,
data: {
level: 1
}
}
];
}
3.每一层节点使用不同的图标types标签
"types": {
"default": {
"icon": "fa fa-globe"
},
"2_level": {
"icon": "fa fa-home"
},
"3_level": {
"icon": "fa fa-flag"
},
}
只是把自己所遇到的jstree问题进行总结，持续更新ing.