想看完整的可以去這里看：
轉載來自：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"] });