jsTree の contextmenu プラグイン
と dnd (ドラッグ&ドロップ)プラグインの処理で
イベントによる処理を書く場合、基本的には各イベント名で、
on の bind関数を書けばよいのだが、、
.on( Eventname , function(ev, data){ }
https://www.jstree.com/api/#/?q=.jstree%20Event&f=cut.jstree
新規作成 | create_node.jstree |
名称変更 | rename_node.jstree |
削除 | delete_node.jstree |
切り取り | cut.jstree |
コピー(貼り付け実行) | copy_node.jstree |
貼り付け | paste.jstree |
移動 | move_node.jstree |
新規作成で新しい名称を入力して focus が外れた時に、
rename_node.jstree イベントが発生して
名称変更との区別が難しくなる。区別した処理を書くには
rename_node.jstree イベントの結合関数を書かずに、
contextmenu で定義する action で実行する edit 関数 で callback を書くしかない。
省略して、その部分だけ書くと、、
"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, new_node.text, function(data){ console.log("create id = " + data.id ); console.log("create text = " + data.text ); console.log("parent id = " + data.parent ); }); }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, data.text, function(data){ console.log("rename id = " + data.id ); console.log("rename new text = " + data.text ); console.log("parent id = " + data.parent ); }); } }, "remove":{ // 省略 }, "cut":{ // 省略 }, "copy":{ // 省略 }, "paste":{ // 省略 } }; },
ということになる。
また、貼り付けのイベント paste.jstree をハンドリングする場合、
「コピーから貼り付け」
「切り取りから貼り付け」
両方とも、paste.jstree イベントで動くので、
copy_node.jstree をハンドリングする関数を書いているのであれば、
.on( "copy_node.jstree", function(ev, data){ }
以下のように、paste.jstree イベントハンドリングを書いた方が、
「切り取り」に限定することができる。
}).on('paste.jstree', function(e, data){ if (data.mode =="move_node"){ console.log("# paste 先 id = "+ data.parent ); console.log("# 対象 id = "+ data.node[0].id ); console.log("# 対象 text = "+ data.node[0].text ); console.log("# paste 先 id = "+ data.parent ); } }