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