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等值。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
