JsTree Contextmenu(Create, Rename, Delete) 활용하기

JsTree로 Context메뉴(오른쪽 클릭)를 활용한 예제입니다.
JsTree Api 활용이나, Disable 처리는 
https://nhj2021.tistory.com/12 참고 바랍니다.

var Editable = true;
var Flag = {
  CreateFolder: true,
  RenameFolder: true,
  DeleteFolder:true
};
// dnd(Drag&Drop)도 있지만 쓰지는 않음
var Plugins = ['wholerow', 'unique','contextmenu','dnd'],;

$('#jsTreeElement')

    .jstree({

        'core': {

            // 새 폴더를 만들 경우 사용

            'strings': {

                'New node': '새 폴더'

            },

            // API 정보 입력

            'data': {

                type: 'get',

                'url': 'sample.com/api/TestJstree',

                'data': function (node) {

                    // 첫 루트인 경우

                    if (node.id == '#') return {

                        'test1': '1',

                        'test2': '2'

                    };

                    // Disable

                    if (node.original != null && node.original.isDisable == true)

                        return null;

                    if (node.original != null && node.original.id)

                        return {

                            'test1': node.original.id

                        };

                    return {

                        'test1': node.id

                    };

                }

            },

            'force_text': true,

            'check_callback': function (operation, node, parentNode, renameNodeText, 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

                var validation = false;

                if (Editable == false)

                    return false;

                switch (operation) {

                    case 'create_node':

                        // 생성이 안되는 곳이면 이곳에서 체크

                        if (Flag.CreateFolder) {

                            Flag.CreateFolder = false;

                            return true;

                        }
                        // 직접 구현 필요!!

                        CreateFolder(parentNode.id, node.text);

                        break;

                    case 'rename_node':

                        if (Flag.RenameFolder) {

                            Flag.RenameFolder = false;

                            return true;

                        }

                        if (node.text == renameNodeText)

                            return false;
                        // 직접 구현 필요!!

                        RenameFolder(node.original.folder_id, renameNodeText);

                        break;

                    case 'delete_node':

                        if (Flag.DeleteFolder) {

                            Flag.DeleteFolder = false;

                            return true;

                        }

                        validation = false;

                        confirm(String.format('선택하신 \"{0}\" 폴더와 하위폴더까지 전부 삭제됩니다. 정말 삭제하시겠습니까?', node.text), null, null, function (yes) {

                            if (yes) {
                                // 직접 구현 필요!!

                                DeleteFolder(node.original.folder_id);

                            }

                        });

                        break;

                }

                return validation;

            },

        },

        "contextmenu": {

            "items": function ($node) {

                //var tree = $("#tree").jstree(true);

                return {

                    "create": {

                        "separator_before": false,

                        "separator_after": true,

                        "_disabled": false,

                        "label": "Create",

                        "action": function (data) {

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

                            });

                        }

                    },

                    "rename": {

                        "separator_before": false,

                        "separator_after": false,

                        "_disabled": false,

                        "label": "Rename",

                        "action": function (data) {

                            var inst = $.jstree.reference(data.reference),

                                obj = inst.get_node(data.reference);

                            inst.edit(obj);

                        }

                    },

                    "remove": {

                        "separator_before": false,

                        "icon": false,

                        "separator_after": false,

                        "_disabled": false,

                        "label": "Delete",

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

                            }

                        }

                    },

                };

            }

        },

        'plugins': Plugins

    })

    });