菜单树jstree.js插件几个主要事件汇总

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的图标路径，如下：

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');
            }
        }

    });
}

 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

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();