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等值。