jstree 的使用（增 删 改 查）

下发数据格式

$('#using_json_2').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" },
    ]
} });

 

 

ajax请求数据：

$("#rolesJsTree").jstree({
"core": {
"check_callback" : true,//默认为flase，会导致无法使用修改树结构。
'data': {
'url': '/Sys/Role/GetRoleJosn',
'dataType': 'json',
}
},
"plugins": ["dnd"] 或  "plugins": ["checkbox"]设置为checkbox
});

关于callback的具体函数控制：
当用户想修改树的结构时，此参数用于决定是否允许修改 或 如何修改。
false，所有操作（创建 create、重命名 rename、删除 delete、移动 move、复制 copy）都将被阻止。
true，所有操作都被允许。
函数，更详细的逻辑控制。

"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 === 'move_node' ? false : true; //表示不可做移动的操作},

 

 

判断节点选中：

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

 

 

 

 select_node.jstree 事件  当节点被选中时触发。

 

  选中节点事件：

    $('#menusdndJsTree').on("select_node.jstree", function (e, data) {
        if (data.node.parent == "#") { //判断选中是否为父类
            return;
        }
        $.ajax({
            type: "GET",
            url: "/Sys/MenuButton/GetMenuButtonJsTree/" + data.selected[0],
            data: {},
            success: function (json) {
                $("#buttonJsTree").jstree("destroy");
                $("#buttonJsTree").jstree({
                    "core": {
                        "check_callback": function (operation, node, node_parent, node_position, more) {
                            return operation === 'move_node' ? false : true;
                        },
                        'data': json
                    },
                    "plugins": ["checkbox"]
                });
            },
            complete: function () {
                var ref = $("#rolesJsTree").jstree(true);
                var sel = ref.get_selected();
                var roleId = sel[0];
                $.ajax({
                    type: "GET",
                    url: "/Sys/MenuButton/GetRoleButtonList",
                    data: { pageId: data.selected[0], roleId: roleId },
                    success: function (json) {
                        if (json != null || json != "") {
                            var ref = $("#buttonJsTree").jstree(true);
                            ref.deselect_all();
                            for (var i = 0; i < json.length; i++) {
                                ref.select_node(json[i]);
                            }
                        }
                    }
                });
            }
        });

    });

 

节点变更事件： 其中还分为选中类型和不选中类型 action

    $('#menusJsTree').on("changed.jstree", function (e, data) {
        if (loadRoleMapIsOK) {
            $("#btn_submit_usermenus").removeAttr("disabled");
        }
    });