摘要：
jstree。Js是用于管理菜单的强大插件。然而，中文文档或案例太少，使用起来非常痛苦。我将介绍一些我在此期间经常使用的知识点，以及我在项目中经常使用的一些知识点jstree；//SearchStrings是搜索关键字的经典示例：1）根据不同类型的节点设置不同的图标，其思想是设置树属性：运行load_When node.jstree，设置每个节点的类型。该字段为set_typeTrue，允许所有操作。
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是搜索的关键词
经典例子：
1）根据不同类型节点设置不同图标，并带有设置树属性
思路：在运行load_node.jstree时设置每个节点的type，字段是set_type。然后在初始插件是设置不同type的图标路径，如下：
functioncategoryMenuTreeInit(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
functionloadJsTree(obj){
//most_tag_type是区分不同节点的字段 $(obj).on("load_node.jstree", function(e, data) { var nodes =data.instance._model.data; for (var i innodes) 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'){debuggernode.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'); } } }); }
2）当用户想修改树的结构时，此参数用于决定是否允许修改 或 如何修改：$.jstree.defaults.core.check_callback
参考：https://blog.csdn.net/j1137573560/article/details/82821839
false，所有操作（创建 create、重命名 rename、删除 delete、移动 move、复制 copy）都将被阻止。true，所有操作都被允许。- 函数，更详细的逻辑控制。
$('#tree').jstree({
'core': {
'check_callback' : function(operation, node, node_parent, node_position, more) {
//operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
//in case of 'rename_node' node_position is filled with the new node name
return operation === 'rename_node' ? true : false;
}
}
});网上一些很好的事件例子：
1）参考：https://www.cnblogs.com/chenjunsheng/p/10232104.html
functioncreate(){//增加节点 var ref = $('#jstree1').jstree(true); var currNode =_getCurrNode(); currNode = ref.create_node(currNode, {"type":"file"}); if(currNode) { ref.edit(currNode); } } functionrename(){//节点重命名 var ref = $('#jstree1').jstree(true); var currNode =_getCurrNode(); ref.rename_node(currNode,"rename node222"); } functiondel(){//删除节点 var ref = $('#jstree1').jstree(true); var currNode =_getCurrNode(); ref.delete_node(currNode); } functionmoveup(){//向上移动节点 var ref = $('#jstree1').jstree(true); var currNode =_getCurrNode(); var prevNode = ref.get_prev_dom(currNode,true); ref.move_node(currNode,prevNode,'before'); } functionmovedown(){//向下移动节点 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();