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等值。
jstree的基本使用例子
原文地址：http://www.cnblogs.com/telwanggs/p/7447483.html