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