アイコン無し=区別ない jsTree での保存

編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 の続き、

アイコン無し、フォルダ等の区別がない、自由にツリーを組み立てるようにする jsTree
編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 に書いたのは、
ファイルシステムのように、ファイルの下にフォルダ、ファイルを作ることはできない当たり前の規則が
あるのではなく、自由にツリーを組み立てるということは、どのノードの下にも子を作れること。
f:id:posturan:20181118104430j:plain

これは、jsTreeの描画JSで以下のようにすることと、CSSを
編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 
から修正すれば良い。

CSSは、

.jstree-default-large .jstree-notIcon {
   display: none;
}

があれば良い。

jsTreeの描画JSの修正は、
'core' の中の 'check_callback'を

   'check_callback' : true,

コンテキストメニューの "createFile" : {..} を削除して、createFolder を ”新規作成" として、修正、
作成されるアイコンも、'icon':'jstree-notIcon' として任意にCSS定義するアイコン無し属性にして、
"text" も違うものにする。

   "createFolder":{
      "separator_before": false,
      "separator_after": false,
      "icon": "contextmenu-icon fa fa-plus",
      "label": "新規作成",
      "_disabled": false,
      "action": function(data){
         var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
         inst.create_node(obj, { text:'New Item', 'icon':'jstree-notIcon' }, "last", function(new_node){
            try{
               inst.edit(new_node);
            }catch(ex){
               setTimeout(function(){ inst.edit(new_node); },0);
            }
         });
      }
   },

全体は以下のとおり

$(function(){
   $.jstree.defaults.core.themes.variant = "large";
   $.jstree.defaults.core.themes.responsive = true;

   $('#tree').jstree({
      'plugins': [ 'contextmenu','dnd' ],
      'core':{
         'data':{
            "url":"./tree.json",
            "dataType":"json"
         },
         'check_callback' : true,
      },
      "contextmenu":{
         "items":function($node){
            return {
               "createFolder":{
                  "separator_before": false,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-plus",
                  "label": "新規作成",
                  "_disabled": false,
                  "action": function(data){
                     var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
                     inst.create_node(obj, { text:'New Item', 'icon':'jstree-notIcon' }, "last", function(new_node){
                        try{
                           inst.edit(new_node);
                        }catch(ex){
                           setTimeout(function(){ inst.edit(new_node); },0);
                        }
                     });
                  }
               },
               "rename":{
                  "separator_before": true,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-edit",
                  "label": "名称の変更",
                  "_disabled": false,
                  "action": function(data){
                     var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
                     inst.edit(obj);
                  }
               },
               "remove":{
                  "separator_before": false,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-trash-alt",
                  "label": "削除",
                  "_disabled": function(data){
                     return $.jstree.reference(data.reference).get_node(data.reference).parent == "#";
                  },
                  "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);
                     }
                  }
               },
               "cut":{
                  "separator_before": true,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-cut",
                  "label": "切り取り",
                  "_disabled": function(data){
                     return $.jstree.reference(data.reference).get_node(data.reference).parent == "#";
                  },
                  "action": function(data){
                     var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
                     if (inst.is_selected(obj)){
                        inst.cut(inst.get_top_selected());
                     }else{
                        inst.cut(obj);
                     }
                  }
               },
               "copy":{
                  "separator_before": false,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-copy",
                  "label": "コピー",
                  "_disabled": function(data){
                     return $.jstree.reference(data.reference).get_node(data.reference).parent == "#";
                  },
                  "action": function(data){
                     var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
                     if (inst.is_selected(obj)){
                        inst.copy(inst.get_top_selected());
                     }else{
                        inst.copy(obj);
                     }
                  }
               },
               "paste":{
                  "separator_before": false,
                  "separator_after": false,
                  "icon": "contextmenu-icon fa fa-paste",
                  "label": "貼り付け",
                  "_disabled": function(data){
                     return !$.jstree.reference(data.reference).can_paste();
                  },
                  "action": function(data){
                     var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);
                     inst.paste(obj);
                     console.log( obj );

                  }
               }
            };
         }
      }
   }).on('loaded.jstree', function(){
      $(this).jstree('open_all');
   });
});