jstree.js是一个很强大管理菜单的插件，奈何中文的文档或者案例太少了，用起来很痛苦，下面我就介绍这段时间我经常用到，平时项目也经常用到的几个知识点。
参考了一下文章：
https://blog.csdn.net/j1137573560/article/details/82821839
https://www.cnblogs.com/chenjunsheng/p/10232104.html
https://www.cnblogs.com/annkiny/p/7725648.html
一、几个事件：
1）用法一样事件：activate_node.jstree(点击)、move_node.jstree(移动)、changed.jstree(改变)、load_node.jstree(节点加载)、init_node.jstree(节点初始化)、select_node.jstree(选中)、create_node.jstree(增加节点)、delete_node.jstree(删除节点)、rename_node.jstree(重命名)
2）搜索：search
例子：
//1）点击
$(‘#categoryTree‘).on("activate_node.jstree", function(e, data) { //#categoryTree是树挂载的元素
var ori = data.node.original; //original下面有点击节点的数据。
})
//2）搜索，搜索和上面两个不大一样。
$(‘#categoryTree‘).jstree(‘search‘, searchString);//searchStrings是搜索的关键词
经典例子：根据不同类型节点设置不同图标，并带有设置树属性
思路：在运行load_node.jstree时设置每个节点的type，字段是set_type。然后在初始插件是设置不同type的图标路径，如下：
function categoryMenuTreeInit(data){//data为节点json数据
//初始化插件
$(‘#categoryTree‘).jstree({
‘core‘ : {
‘check_callback‘ : true,
‘data‘ : data
},
‘plugins‘ : ["dnd", "search", "types", "wholerow"],//contextmenu增加右击菜单
‘search‘ : {
‘case_sensitive‘ : false,
‘show_only_matches‘ : true//搜索时只展示有关键字的节点
},
‘types‘ : { //根据不同的type，设置不同的图标
‘default‘ : {
‘icon‘ : ‘glyphicon glyphicon-folder-close‘//bootstrap图标，之前有引入bootstrap
},
‘ordinary‘ : {
‘icon‘ : ‘glyphicon glyphicon-folder-close‘
},
‘hierarchy‘ : {
‘icon‘ : ‘glyphicon glyphicon-book‘
},
‘normal‘ : {
‘icon‘ : ‘glyphicon glyphicon-tag‘
},
‘combine‘ : {
‘icon‘ : ‘glyphicon glyphicon-tags‘
},
‘upload‘ : {
‘icon‘ : ‘glyphicon glyphicon-level-up‘
}
},
‘callback‘ : {
//onAsyncSuccess: zTreeOnAsyncSuccess
}
})
loadJsTree(‘#categoryTree‘)
}
//设置插件图标属性type：set_type
function loadJsTree(obj){
//most_tag_type是区分不同节点的字段 $(obj).on("load_node.jstree", function(e, data) { var nodes = data.instance._model.data; for (var i in nodes) var node = nodes[i]; var most_tag_type = ‘‘; if(nodes[i].original){ most_tag_type = nodes[i].original.most_tag_type;//获取节点类型 } if(most_tag_type == ‘0‘){debugger node.a_attr.title = "目录:" + nodes[i].original.node_name + ‘( id:‘ + nodes[i].original.id + ‘ )‘ //设置树属性title data.instance.set_type(node, ‘ordinary‘); //设置树的类型 }else if(most_tag_type == ‘1‘){ node.a_attr.title = "1标签:" + nodes[i].original.node_name + ‘( id:‘ + nodes[i].original.id + ‘ )‘ data.instance.set_type(node, ‘hierarchy‘); }else if(most_tag_type == ‘10‘){ node.a_attr.title = "2标签:" + nodes[i].original.node_name + ‘( id:‘ + nodes[i].original.id + ‘ )‘ data.instance.set_type(node, ‘normal‘); }else if(most_tag_type == ‘11‘){ node.a_attr.title = "3标签:" + nodes[i].original.node_name + ‘( id:‘ + nodes[i].original.id + ‘ )‘ data.instance.set_type(node, ‘combine‘); }else if(most_tag_type == ‘12‘){ node.a_attr.title = "4标签:" + nodes[i].original.node_name + ‘( id:‘ + nodes[i].original.id + ‘ )‘ data.instance.set_type(node, ‘upload‘); } } }); }
网上一些很好的事件例子：
1）参考：https://www.cnblogs.com/chenjunsheng/p/10232104.html
function create(){//增加节点 var ref = $(‘#jstree1‘).jstree(true); var currNode = _getCurrNode(); currNode = ref.create_node(currNode, {"type":"file"}); if(currNode) { ref.edit(currNode); } } function rename(){//节点重命名 var ref = $(‘#jstree1‘).jstree(true); var currNode = _getCurrNode(); ref.rename_node(currNode,"rename node222"); } function del(){//删除节点 var ref = $(‘#jstree1‘).jstree(true); var currNode = _getCurrNode(); ref.delete_node(currNode); } function moveup(){//向上移动节点 var ref = $(‘#jstree1‘).jstree(true); var currNode = _getCurrNode(); var prevNode = ref.get_prev_dom(currNode,true); ref.move_node(currNode,prevNode,‘before‘); } function movedown(){//向下移动节点 var ref = $(‘#jstree1‘).jstree(true); var currNode = _getCurrNode(); var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点 ref.move_node(currNode,nextNode,‘after‘); }
2）参考：https://www.cnblogs.com/annkiny/p/7725648.html
var ref = $(‘#rolesJsTree‘).jstree(true), sel = ref.get_selected();
if (!sel.length) { return false; }
ref.delete_node($(‘#‘ + itemVal));
或者ref.delete_node(sel);
var psel = ref.get_parent(sel);
ref.create_node(addId, {//addId父节点使用‘#’，其他使用ID值
"id": msg.rt,//节点ID
"text": roleName//节点文本
}), "last";//表示添加到末尾
ref.set_text(sel, roleName);
ref.refresh();
ref.select_node(msg[i]);
ref.deselect_all(); //全不选择
ref.select_all();//选择所有
var sltText = ref.get_text(sel);
ref.cut(sel); ref.paste(parentRoleID=="0"?"#":parentRoleID);
刷新树的选中：
var ref = $("#buttonJsTree").jstree(true);//这句话很重要
ref.deselect_all();
原文：https://www.cnblogs.com/zzwlong/p/12488156.html