jstree使用小结(二)

继续上一篇:

1.数据

按照官网的json数据返回格式: 有两种格式,我使用的格式如下:

$(‘#jstree1‘).jstree({ ‘core‘ : {
    ‘data‘ : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
    ]
} });

这里data是后台返回的

//我这里由于项目原因稍微处理了下,/getData是后台数据返回的路径
$.post(‘/getData‘,null,function(data){
    if(data.result && data.result.status==‘200‘){
        cb.call($this, data.result.datas);//data.result.datas的值是json数据
    }else{
        alert(data.result.message);
    }
});

2.右键菜单

(1)在jstree的源码中已经预定了右键菜单如下:

$.jstree.defaults.contextmenu = {

　　 select_node:true,//设置当前节点是否为选中状态 true表示选中状态

    show_at_node:true,//设置右键菜单是否和节点对齐 true表示对齐

    items : function (o, cb) { // Could be an object directly
            return {
                "create" : {
                    "separator_before"    : false,//Create这一项在分割线之前
                    "separator_after"    : true,//Create这一项在分割线之后
                    "_disabled"            : false, //false表示 create 这一项可以使用; true表示不能使用
                    "label"                : "Create",  //Create这一项的名称 可自定义
                    "action"            : function (data) {  //点击Create这一项触发该方法
                        var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性　　　　　　　　　　　　　　//新加节点
                        inst.create_node(obj, {}, "last", function (new_node) {
                            setTimeout(function () { inst.edit(new_node); },0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
                        });
                    }
                },
....

(2)这里我们自定义右键菜单

 var $tree=$(‘#tree1‘);
        $tree.jstree({
            "core": {
                "themes": {
                    "responsive": false
                },
                "check_callback": true,
                ‘data‘: []
            },
            "contextmenu":{
                select_node : false,
                show_at_node : true,
                items: function(o, cb){
                    //因为这里我们之后需要定义多个项,所以通过对象的方式返回
                    var actions={};
                    //添加一个"新增"右键菜单
                    actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
                        "separator_before"    : false,//Create这一项在分割线之前
                        "separator_after"    : true,//Create这一项在分割线之后
                        "_disabled"            : false, //false表示 create 这一项可以使用; true表示不能使用
                        "label"                : "新增",  //Create这一项的名称 可自定义
                        "action"            : function (data) {  //点击Create这一项触发该方法,这理还是蛮有用的
                            var inst = $.jstree.reference(data.reference),
                                 obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                            //新加节点,以下三行代码注释掉就不会添加节点
                            inst.create_node(obj, {}, "last", function (new_node) {
                                setTimeout(function () { inst.edit(new_node); },0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
                            });
                        }
                    };
                    //添加一个"重命名"右键菜单
                    actions.rename={
                        "separator_before"    : false,
                        "separator_after"    : false,
                        "_disabled"            : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                        "label"                : "重命名",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                            inst.edit(obj);
                        }
                    }
                    //添加一个"删除"右键菜单
                    actions.delete= {
                        "separator_before"    : false,
                                "icon"                : false,
                                "separator_after"    : false,
                                "_disabled"            : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                                "label"                : "删除",
                                "action"            : function (data) {
                                    var inst = $.jstree.reference(data.reference),
                                            obj = inst.get_node(data.reference);
                                    if(inst.is_selected(obj)) {
                                        inst.delete_node(inst.get_selected());
                                    }
                                    else {
                                        inst.delete_node(obj);
                                    }
                        }
                    };
                    return actions;//返回右键菜单项
                }
            },
            "types": {
                "default": {
                    "icon": "fa fa-folder icon-state-warning icon-lg"
                },
                "file": {
                    "icon": "fa fa-file icon-state-warning icon-lg"
                }
            },
            "plugins": ["contextmenu","dnd", "state", "types"]
        });