jstree的基本使用例子

var menu = (function() { var _menu = {data:{}, initMenu : function() { $.jstree.defaults.core.themes.variant = "large"; $.jstree.defaults.core.themes.responsive = true; $.jstree.defaults.sort=function(a,b){ return this.get_node(a).original.order > this.get_node(b).original.order ? 1 : -1; } var jsTree = $('#tree_1').jstree( { 'core' : { 'data' :{ 'url':$.hr_contextUrl()+"menu/list", 'data':function(node){ return node; } } }, 'plugins':['contextmenu','sort'], "contextmenu":{ "items":{ "create":null, "rename":null, "remove":null, "ccp":null, "新建菜單":{ "label":"新建菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]) var pid = node.parent; _menu.operation.addMenu(pid,node); } }, "刪除菜單":{ "label":"刪除菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]); _menu.operation.delMenu(node); } }, "修改菜單":{ "label":"修改菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]).original; _menu.operation.editMenu(node); } }, "上移菜單":{ "label":"上移菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]); var prev_dom = $(data.reference[0]).closest("li").prev(); _menu.operation.sortMenu(node,prev_dom); } }, "下移菜單":{ "label":"下移菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]); var next_dom = $(data.reference[0]).closest("li").next(); _menu.operation.sortMenu(node,next_dom); } }, "新建子菜單":{ "label":"新建子菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]); var pid = node.id; _menu.operation.addMenu(pid,node); } } } } }); this.data.jsTree=jsTree; }, initEvent: function(){ $("#closeMenu").click(function(){ _menu.data.jsTree.jstree('close_all'); }); _menu.data.jsTree.on('load_node.jstree',function(){ var root = _menu.data.jsTree.jstree('get_node',"#"); var children = _menu.data.jsTree.jstree("get_children_dom",root); var a = $("a",children); $.each(a,function(){ $(this).bind("contextmenu",function(){ var parent = _menu.data.jsTree.jstree('get_parent',$(this)); if(parent!=='#'){ if(_menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜單"]){ delete _menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜單"]; } }else{ if(!_menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜單"]){ _menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜單"]={ "label":"新建子菜單", "action":function(data){ var node = _menu.data.jsTree.jstree('get_node',data.reference[0]); var pid = node.id; _menu.operation.addMenu(pid); } }; } } }); }); _menu.data.jsTree.jstree('select_node',root.children[0]); }); _menu.data.jsTree.on('select_node.jstree',function(node,selected,event){ $.get($.hr_contextUrl()+"menu/getMenu",{id:selected.node.id},function(data){ $("#menuForm").resetForm(); $("#menuForm").disableForm(); $("#menuForm").loader(data); $("#menuForm [name='pMenuName']").val(data.pMenu?(data.pMenu.text||''):''); },"json") }); $("#showMenu").click(function(){ _menu.data.jsTree.jstree('open_all'); }); }, operation:{ addMenu:function(pid,node){ if(pid==="#"){ $("#menuForm [name=pid]").val(""); }else{ $("#menuForm [name=pid]").val(pid); } $("#menuForm").resetForm(); this.setOrder(pid); $("#menuForm").enableForm(); }, editMenu:function(node){ $("#menuForm").resetForm(); $("#menuForm").enableForm().loader(node); }, sortMenu:function(node,dom){ if(dom.length>0){ var otherNode = _menu.data.jsTree.jstree('get_node',dom[0]); $.post($.hr_contextUrl()+"menu/order",{"currId":node.id,"otherId":otherNode.id},function(){ _menu.operation.refresh(); },"json"); } }, setOrder:function(pid){ var root = _menu.data.jsTree.jstree('get_node',pid); var children = _menu.data.jsTree.jstree("get_children_dom",root); var lastNode = _menu.data.jsTree.jstree('get_node',children[children.length-1]); $("#menuForm [name='order']").val(lastNode.original.order+1); }, refresh:function(){ _menu.data.jsTree.jstree('refresh'); $("#menuForm .control-group").removeClass('success') }, delMenu:function(node){ var children = _menu.data.jsTree.jstree("get_children_dom",node); if(children.length>0){ $.Zebra_Dialog('該菜單下還有子菜單不能刪除！', { 'type': 'error', 'title': '系統提示' }); return; } var id = node.id; $.Zebra_Dialog('您確認要刪除該菜單么？', { 'type': 'question', 'title': '系統提示', 'buttons': [ {caption: '確定', callback: function() { $.post($.hr_contextUrl()+"menu/delMenu",{'id':id},function(msg){ new $.Zebra_Dialog(msg, { 'buttons': false, 'modal': false, 'position': ['right - 20', 'bottom - 20'], 'auto_close': 2500, 'animation_speed_show':500, 'animation_speed_hide':500, 'onClose':function(){ _menu.operation.refresh(); } }); },'json'); }}, {caption: '取消'}, ] }); } } }; return { init:function(){ _menu.initMenu(); _menu.initEvent(); _menu.initForm(); } }; })();

 

 
這個是做好的效果圖，代碼中對contextmenu的數量做了調整，當用戶點擊一級菜單時 

當用戶點擊二級菜單時 

其實在jstree中，它將菜單項保存在了settings.contextmenu.items這個數組中，所以在用戶右鍵的時候動態設置items就可以做到菜單的動態改變。

如果想獲取到從后台傳遞的不屬於jstree配置屬性的值，可以查看節點的original屬性，這個屬性中存儲的是這個節點所對應的所有數據。

比如：

@Entity @Table(name = "t_menu") public class Menu { private String id; private String text; private String url; private Menu pMenu; private String pid; private String icon; private State state; private Integer order; private String descr; private Set<Menu> children = new HashSet<Menu>(); /**省略setter和getter*/ } 

 

如果后台程序中與jstree的對應屬性為 上面的類，實際上在前台通過jstree的get_node方法獲取到這個節點, 
節點的original屬性中就會有url,order,descr等值。