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

  })

});