jsTree自定义contextmenu 的二种方式
想看完整的可以去这里看：
转载来自：jstree使用小结(二)和 JsTree 最详细教程及完整实例
以下代码我只列出针对于contextmenu里面的设置；其余代码不写了
比如不希望用jstree自身的contextmenu，希望自己定义。则代码如下
第一种方法；直接编写items，改写菜单名称和重新定义菜单方法
1 "contextmenu":{ 2 "items":{ 3 "create":null, 4 "rename":null, 5 "remove":null, 6 "ccp":null, 7 "新建菜单":{ 8 "label":"新建菜单", 9 "action":function(data){ 10 var inst = jQuery.jstree.reference(data.reference), 11 obj = inst.get_node(data.reference); 12 dialog.show({"title":"新建“"+obj.text+"”的子菜单",url:"/accountmanage/createMenu?id="+obj.id,height:280,width:400}); 13 } 14 }, 15 "删除菜单":{ 16 "label":"删除菜单", 17 "action":function(data){ 18 var inst = jQuery.jstree.reference(data.reference), 19 obj = inst.get_node(data.reference); 20 if(confirm("确定要删除此菜单？删除后不可恢复。")){ 21 jQuery.get("/accountmanage/deleteMenu?id="+obj.id,function(dat){ 22 if(dat == 1){ 23 alert("删除菜单成功！"); 24 jQuery("#"+treeid).jstree("refresh"); 25 }else{ 26 alert("删除菜单失败！"); 27 } 28 }); 29 } 30 } 31 }, 32 "编辑菜单":{ 33 "label":"编辑菜单", 34 "action":function(data){ 35 var inst = jQuery.jstree.reference(data.reference), 36 obj = inst.get_node(data.reference); 37 dialog.show({"title":"编辑“"+obj.text+"”菜单",url:"/accountmanage/editMenu?id="+obj.id,height:280,width:400}); 38 } 39 } 40 } 41 }
第二种：编写菜单名称的时候带入变量，且重新定义方法
(1)在jstree的源码中已经预定了右键菜单如下:
$.jstree.defaults.contextmenu = { select_node:true,//设置当前节点是否为选中状态 true表示选中状态 show_at_node:true,//设置右键菜单是否和节点对齐 true表示对齐 items : function (o, cb) { // Could be an object directly return { "create" : { "separator_before" : false,//Create这一项在分割线之前 "separator_after" : true,//Create这一项在分割线之后 "_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用 "label" : "Create", //Create这一项的名称 可自定义 "action" : function (data) { //点击Create这一项触发该方法 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);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点 }); } }, ....
var $tree=$('#tree1'); $tree.jstree({ "core": { "themes": { "responsive": false }, "check_callback": true, 'data': [] }, "contextmenu":{ select_node : false,//设置当前节点是否为选中状态 true表示选中状态 show_at_node : true,//设置右键菜单是否和节点对齐 true表示对齐 items: function(o, cb){ //因为这里我们之后需要定义多个项,所以通过对象的方式返回 var actions={}; //添加一个"新增"右键菜单 actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法 "separator_before" : false,//Create这一项在分割线之前 "separator_after" : true,//Create这一项在分割线之后 "_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用 "label" : "新增", //Create这一项的名称 可自定义 "action" : function (data) { //点击Create这一项触发该方法,这理还是蛮有用的 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);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点 }); } }; //添加一个"重命名"右键菜单 actions.rename={ "separator_before" : false, "separator_after" : false, "_disabled" : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")), "label" : "重命名", "action" : function (data) { var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference); inst.edit(obj); } } //添加一个"删除"右键菜单 actions.delete= { "separator_before" : false, "icon" : false, "separator_after" : false, "_disabled" : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")), "label" : "删除", "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); } } }; return actions;//返回右键菜单项 } }, "types": { "default": { "icon": "fa fa-folder icon-state-warning icon-lg" }, "file": { "icon": "fa fa-file icon-state-warning icon-lg" } }, "plugins": ["contextmenu","dnd", "state", "types"] });
