创建Ext菜单
2015-11-03 13:47
519 查看
拼装Ext菜单数据：
Ext.define('MyExt.app.HorizonMenu',{
alias:["widget.horizonMenu"],
extend : 'Ext.toolbar.Toolbar',
alternateClassName:["HorizonMenu"],
constructor : function(config) {
var me=this;
Ext.apply(this,config);
me.initMenu();
this.callParent();
},
initMenu:function(){
var me=this;
Ext.AjaxGet("/security/user/getTree",null,function(){},function(response){
var items=[],len=response.length;
for(var i=0;i<len;i++){
var item={
text:response[i].text,
style:{
"border-radius":0
},
margin:"0 5 0 5"
};
if(response[i].children){
item.menu=[];
var childLen=response[i].children.length;
for(var j=0;j<childLen;j++){
console.log("text:"+ response[i].children[j].text);
console.log("url:"+ response[i].children[j].url);
console.log("iconCls:"+ response[i].children[j].iconCls);
item.menu.push({
text:response[i].children[j].text,
url:response[i].children[j].url,
iconCls:response[i].children[j].icon,
handler:function(){
portal.contMgr.switchContent(this.url,true);
}
});
}
}
items.push(item);
}
me.add(items);
});
}
});
Ext.define('treeMenuModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' , type: 'string'},
{name: 'text' , type: 'string'},
{name: 'iconCls', type: 'string'},
{name: 'leaf' , type: 'boolean'},
{name: 'icon' , type: 'string'},
{name: 'url' , type: 'string'}
]
});
Ext.define('MyExt.app.TreeMenu',{
alias : ['widget.treeMenu'],
extend : 'Ext.tree.Panel',
alternateClassName : ['TreeMenu'],
require : [
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox'
],
constructor : function(config) {
my_treeMenu=this;
Ext.apply(this,config);
this.initStore();
this.addEvents("menuclick");
this.callParent();
},
url:"",
/**
* @cfg {Boolean} 是否根节点可见
*/
rootVisible :false,
/**
* @cfg {Boolean} 是否允许自动出现滚动条
*/
autoScroll : true,
/**
* @cfg {Boolean} 是否预先加载子节点
*/
preloadChildren : true,
/**
* @cfg {Boolean} 是否折叠根节点
*/
collapseFirst : true,
border : false,
/**
* @cfg {Boolean} 是否显示自定义icon
*/
displayIcon : false,
/**
* @cfg {String} 根节点的名称
*/
rootText : "root",
/**
* @cfg {function} menuHandler 点击菜单的回调函数
*/
menuHandler : Ext.emptyFn,
initComponent : function() {
MyExt.app.TreeMenu.superclass.initComponent.call(this);
this.on("itemclick", this.handleOnClick);
},
/**
* 设置菜单项点击后的回调函数
*
* @param {function}
* f 回调函数
*/
setHandler : function(f) {
this.menuHandler = f;
this.on("menuclick", f);
},
/**
* 处理菜单点击事件
* @param {TreeNode} node 点击的节点
* @param {Event} e 事件
*/
handleOnClick : function(view,record,item,index,e,eOpts){
e.stopEvent();
if(record.data.leaf || (!record.data.leaf && record.data.url)){
this.fireEvent("menuclick",record.data,e);
}
},
initStore : function(){
var me=this;
me.store=Ext.create('Ext.data.TreeStore', {
model : 'treeMenuModel',
proxy : {
type : 'ajax',
headers : UIConfig.AJAX_HEADERS,
url : me.url
},
root : {
text : UIConfig.MENU_ROOT_TEXT,
id : 'root',
expanded: true
}
});
},
/**
* 定位到指定的菜单
*
* @param {function}
* 完整的菜单路径，使用各个菜单节点的id，以/作为分隔符，如/menu1/menu11/menu112
*/
locate : function(path) {
if (path) {
this.expandPath(path);
}
return;
},
/**
* 重新刷新菜单
*/
refresh : function() {
this.getStore().load();
},
dockedItems : [{
xtype : 'toolbar',
height : 28,
items : [{
tooltip : '刷新',
iconCls : 'refresh',
handler : function() {
my_treeMenu.refresh();
}
},{
tooltip : '全部展开',
iconCls : 'expand-all',
handler : function() {
//my_treeMenu.collapseAll();
my_treeMenu.expandAll();
}
},{
tooltip : '全部折叠',
iconCls : 'collapse-all',
handler : function() {
my_treeMenu.collapseAll();
}
}]
}]
});
@Autowired
private IUserService userService;
@RequestMapping(value = "/getTree", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody
List<NodeUserMenuTree> queryUserMenu(HttpServletRequest request) {
HttpSession session = request.getSession();
Object obj = session.getAttribute(Constants.SESSION_NAME);
Long userId = ((User) obj).getId();
List<NodeUserMenuTree> tree = userService.createMenuTree(userId);
return tree;
}
@Autowired
private IMenuDao menuDao;
@Override
public List<NodeUserMenuTree> createMenuTree(long userId)
{
List<Menu> menuList = menuDao.queryMenuByUserIdAndType(userId);
List<Menu> menu = menuDao.queryMenuByUser(userId);
menuList.addAll(menu);
List<NodeUserMenuTree> list = createMenuTree(menuList);
return list;
}
queryMenuByUserIdAndType
SELECT DISTINCT m.ID,m.NAME,m.URL,m.LEVEL,m.PARENT_ID,m.TYPE,m.DESCRIPTION
FROM t_menu m,t_role_menu rm,t_user_role ur
WHERE ur.ROLE_ID=rm.ROLE_ID AND rm.MENU_ID = m.ID
AND ur.USER_ID=1
AND m.LEVEL= 2 ORDER BY m.ID
queryMenuByUser：
SELECT DISTINCT m.ID,m.NAME,m.URL,m.LEVEL,m.PARENT_ID,m.TYPE,m.DESCRIPTION
FROM t_menu m WHERE m.ID IN( SELECT DISTINCT m.PARENT_ID
FROM t_menu m,t_role_menu rm,t_user_role ur
WHERE ur.ROLE_ID=rm.ROLE_ID AND rm.MENU_ID = m.ID AND ur.USER_ID=1 AND m.LEVEL= 2 )
CREATE TABLE `t_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(64) DEFAULT NULL COMMENT '权限名称',
`url` varchar(256) DEFAULT NULL COMMENT '权限地址',
`level` int(11) DEFAULT NULL COMMENT '权限级别，定义为1,2,3等',
`parent_id` int(11) DEFAULT NULL COMMENT '父权限的ID',
`description` varchar(256) DEFAULT NULL COMMENT '权限的描述',
`type` int(11) DEFAULT NULL COMMENT '1表示超级管理员的才能有的权限，2表示可提供其它角色',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8
CREATE TABLE `t_role_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int(11) DEFAULT NULL COMMENT '权限编号',
`role_id` int(11) DEFAULT NULL COMMENT '角色编号',
PRIMARY KEY (`id`),
KEY `FK_PERMISSION_ROLEPER` (`menu_id`) USING BTREE,
KEY `FK_ROLE_ROLEPERMISSION` (`role_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=98 DEFAULT CHARSET=utf8
CREATE TABLE `t_user_role` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL COMMENT '用户编号',
`role_id` int(11) DEFAULT NULL COMMENT '角色编号',
PRIMARY KEY (`id`),
KEY `FK_FK_ROLE_USERROLED` (`role_id`) USING BTREE,
KEY `FK_USER_ROLEUESER` (`user_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=utf8
private List<NodeUserMenuTree> createMenuTree(List<Menu> allMenuList)
{
List<NodeUserMenuTree> nodeList = new ArrayList<NodeUserMenuTree>();
Map<Long, Menu> mapMenu = new HashMap<Long, Menu>();
Map<Long, NodeUserMenuTree> mapNode = new HashMap<Long, NodeUserMenuTree>();
// 根据菜单创建树节点集合
for (int i = 0; i < allMenuList.size(); i++)
{
Menu menu = allMenuList.get(i);
NodeUserMenuTree NodeUserMenuTree = new NodeUserMenuTree();
NodeUserMenuTree.setId(menu.getId());
NodeUserMenuTree.setText(menu.getName());
NodeUserMenuTree.setUrl(menu.getUrl());
mapMenu.put(menu.getId(), menu);
mapNode.put(menu.getId(), NodeUserMenuTree);
nodeList.add(NodeUserMenuTree);
}
// 根据父子关系生成树
List<NodeUserMenuTree> treeList = new ArrayList<NodeUserMenuTree>();
// 资源管理
for (int i = 0; i < nodeList.size(); i++)
{
NodeUserMenuTree node = nodeList.get(i);
node.setLeaf(true);
Long parentId = mapMenu.get(node.getId()).getParentId();
if (parentId != null)
{
NodeUserMenuTree parentNode = mapNode.get(parentId);
parentNode.setLeaf(false);
parentNode.getChildren().add(node);
}
else
{
treeList.add(node);
}
}
return treeList;
}
package com.comname.tms.security.entity;
import java.io.Serializable;
public class Menu implements Serializable
{
private Long id;
private String name;
private String url;
private Long parentId;
private Integer level;
private Integer type;
private String description;
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getUrl()
{
return url;
}
public void setUrl(String url)
{
this.url = url;
}
public Long getParentId()
{
return parentId;
}
public void setParentId(Long parentId)
{
this.parentId = parentId;
}
public Integer getLevel()
{
return level;
}
public void setLevel(Integer level)
{
this.level = level;
}
public String getDescription()
{
return description;
}
public void setDescription(String description)
{
this.description = description;
}
public Integer getType()
{
return type;
}
public void setType(Integer type)
{
this.type = type;
}
}
package com.comname.common;
import java.util.ArrayList;
import java.util.List;
import javax.xml.bind.annotation.XmlElement;
public class NodeUserMenuTree
{
private Long id;
private String url;
private String text;
private Boolean leaf = false;
private String icon = "";
private String iconCls = "nav";
private List<NodeUserMenuTree> children = new ArrayList<NodeUserMenuTree>();
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getUrl()
{
return url;
}
public void setUrl(String url)
{
this.url = url;
}
public String getText()
{
return text;
}
public void setText(String text)
{
this.text = text;
}
public Boolean getLeaf()
{
return leaf;
}
public void setLeaf(Boolean leaf)
{
this.leaf = leaf;
}
@XmlElement(name = "nodeusermenutree")
public List<NodeUserMenuTree> getChildren()
{
return children;
}
public void setChildren(List<NodeUserMenuTree> children)
{
this.children = children;
}
public String getIcon()
{
return icon;
}
public void setIcon(String icon)
{
this.icon = icon;
}
public String getIconCls()
{
return iconCls;
}
public void setIconCls(String iconCls)
{
this.iconCls = iconCls;
}
}
Ext.define('MyExt.app.HorizonMenu',{
alias:["widget.horizonMenu"],
extend : 'Ext.toolbar.Toolbar',
alternateClassName:["HorizonMenu"],
constructor : function(config) {
var me=this;
Ext.apply(this,config);
me.initMenu();
this.callParent();
},
initMenu:function(){
var me=this;
Ext.AjaxGet("/security/user/getTree",null,function(){},function(response){
var items=[],len=response.length;
for(var i=0;i<len;i++){
var item={
text:response[i].text,
style:{
"border-radius":0
},
margin:"0 5 0 5"
};
if(response[i].children){
item.menu=[];
var childLen=response[i].children.length;
for(var j=0;j<childLen;j++){
console.log("text:"+ response[i].children[j].text);
console.log("url:"+ response[i].children[j].url);
console.log("iconCls:"+ response[i].children[j].iconCls);
item.menu.push({
text:response[i].children[j].text,
url:response[i].children[j].url,
iconCls:response[i].children[j].icon,
handler:function(){
portal.contMgr.switchContent(this.url,true);
}
});
}
}
items.push(item);
}
me.add(items);
});
}
});
Ext.define('treeMenuModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' , type: 'string'},
{name: 'text' , type: 'string'},
{name: 'iconCls', type: 'string'},
{name: 'leaf' , type: 'boolean'},
{name: 'icon' , type: 'string'},
{name: 'url' , type: 'string'}
]
});
Ext.define('MyExt.app.TreeMenu',{
alias : ['widget.treeMenu'],
extend : 'Ext.tree.Panel',
alternateClassName : ['TreeMenu'],
require : [
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox'
],
constructor : function(config) {
my_treeMenu=this;
Ext.apply(this,config);
this.initStore();
this.addEvents("menuclick");
this.callParent();
},
url:"",
/**
* @cfg {Boolean} 是否根节点可见
*/
rootVisible :false,
/**
* @cfg {Boolean} 是否允许自动出现滚动条
*/
autoScroll : true,
/**
* @cfg {Boolean} 是否预先加载子节点
*/
preloadChildren : true,
/**
* @cfg {Boolean} 是否折叠根节点
*/
collapseFirst : true,
border : false,
/**
* @cfg {Boolean} 是否显示自定义icon
*/
displayIcon : false,
/**
* @cfg {String} 根节点的名称
*/
rootText : "root",
/**
* @cfg {function} menuHandler 点击菜单的回调函数
*/
menuHandler : Ext.emptyFn,
initComponent : function() {
MyExt.app.TreeMenu.superclass.initComponent.call(this);
this.on("itemclick", this.handleOnClick);
},
/**
* 设置菜单项点击后的回调函数
*
* @param {function}
* f 回调函数
*/
setHandler : function(f) {
this.menuHandler = f;
this.on("menuclick", f);
},
/**
* 处理菜单点击事件
* @param {TreeNode} node 点击的节点
* @param {Event} e 事件
*/
handleOnClick : function(view,record,item,index,e,eOpts){
e.stopEvent();
if(record.data.leaf || (!record.data.leaf && record.data.url)){
this.fireEvent("menuclick",record.data,e);
}
},
initStore : function(){
var me=this;
me.store=Ext.create('Ext.data.TreeStore', {
model : 'treeMenuModel',
proxy : {
type : 'ajax',
headers : UIConfig.AJAX_HEADERS,
url : me.url
},
root : {
text : UIConfig.MENU_ROOT_TEXT,
id : 'root',
expanded: true
}
});
},
/**
* 定位到指定的菜单
*
* @param {function}
* 完整的菜单路径，使用各个菜单节点的id，以/作为分隔符，如/menu1/menu11/menu112
*/
locate : function(path) {
if (path) {
this.expandPath(path);
}
return;
},
/**
* 重新刷新菜单
*/
refresh : function() {
this.getStore().load();
},
dockedItems : [{
xtype : 'toolbar',
height : 28,
items : [{
tooltip : '刷新',
iconCls : 'refresh',
handler : function() {
my_treeMenu.refresh();
}
},{
tooltip : '全部展开',
iconCls : 'expand-all',
handler : function() {
//my_treeMenu.collapseAll();
my_treeMenu.expandAll();
}
},{
tooltip : '全部折叠',
iconCls : 'collapse-all',
handler : function() {
my_treeMenu.collapseAll();
}
}]
}]
});
@Autowired
private IUserService userService;
@RequestMapping(value = "/getTree", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody
List<NodeUserMenuTree> queryUserMenu(HttpServletRequest request) {
HttpSession session = request.getSession();
Object obj = session.getAttribute(Constants.SESSION_NAME);
Long userId = ((User) obj).getId();
List<NodeUserMenuTree> tree = userService.createMenuTree(userId);
return tree;
}
@Autowired
private IMenuDao menuDao;
@Override
public List<NodeUserMenuTree> createMenuTree(long userId)
{
List<Menu> menuList = menuDao.queryMenuByUserIdAndType(userId);
List<Menu> menu = menuDao.queryMenuByUser(userId);
menuList.addAll(menu);
List<NodeUserMenuTree> list = createMenuTree(menuList);
return list;
}
queryMenuByUserIdAndType
SELECT DISTINCT m.ID,m.NAME,m.URL,m.LEVEL,m.PARENT_ID,m.TYPE,m.DESCRIPTION
FROM t_menu m,t_role_menu rm,t_user_role ur
WHERE ur.ROLE_ID=rm.ROLE_ID AND rm.MENU_ID = m.ID
AND ur.USER_ID=1
AND m.LEVEL= 2 ORDER BY m.ID
queryMenuByUser：
SELECT DISTINCT m.ID,m.NAME,m.URL,m.LEVEL,m.PARENT_ID,m.TYPE,m.DESCRIPTION
FROM t_menu m WHERE m.ID IN( SELECT DISTINCT m.PARENT_ID
FROM t_menu m,t_role_menu rm,t_user_role ur
WHERE ur.ROLE_ID=rm.ROLE_ID AND rm.MENU_ID = m.ID AND ur.USER_ID=1 AND m.LEVEL= 2 )
CREATE TABLE `t_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(64) DEFAULT NULL COMMENT '权限名称',
`url` varchar(256) DEFAULT NULL COMMENT '权限地址',
`level` int(11) DEFAULT NULL COMMENT '权限级别，定义为1,2,3等',
`parent_id` int(11) DEFAULT NULL COMMENT '父权限的ID',
`description` varchar(256) DEFAULT NULL COMMENT '权限的描述',
`type` int(11) DEFAULT NULL COMMENT '1表示超级管理员的才能有的权限，2表示可提供其它角色',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8
CREATE TABLE `t_role_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int(11) DEFAULT NULL COMMENT '权限编号',
`role_id` int(11) DEFAULT NULL COMMENT '角色编号',
PRIMARY KEY (`id`),
KEY `FK_PERMISSION_ROLEPER` (`menu_id`) USING BTREE,
KEY `FK_ROLE_ROLEPERMISSION` (`role_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=98 DEFAULT CHARSET=utf8
CREATE TABLE `t_user_role` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL COMMENT '用户编号',
`role_id` int(11) DEFAULT NULL COMMENT '角色编号',
PRIMARY KEY (`id`),
KEY `FK_FK_ROLE_USERROLED` (`role_id`) USING BTREE,
KEY `FK_USER_ROLEUESER` (`user_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=utf8
private List<NodeUserMenuTree> createMenuTree(List<Menu> allMenuList)
{
List<NodeUserMenuTree> nodeList = new ArrayList<NodeUserMenuTree>();
Map<Long, Menu> mapMenu = new HashMap<Long, Menu>();
Map<Long, NodeUserMenuTree> mapNode = new HashMap<Long, NodeUserMenuTree>();
// 根据菜单创建树节点集合
for (int i = 0; i < allMenuList.size(); i++)
{
Menu menu = allMenuList.get(i);
NodeUserMenuTree NodeUserMenuTree = new NodeUserMenuTree();
NodeUserMenuTree.setId(menu.getId());
NodeUserMenuTree.setText(menu.getName());
NodeUserMenuTree.setUrl(menu.getUrl());
mapMenu.put(menu.getId(), menu);
mapNode.put(menu.getId(), NodeUserMenuTree);
nodeList.add(NodeUserMenuTree);
}
// 根据父子关系生成树
List<NodeUserMenuTree> treeList = new ArrayList<NodeUserMenuTree>();
// 资源管理
for (int i = 0; i < nodeList.size(); i++)
{
NodeUserMenuTree node = nodeList.get(i);
node.setLeaf(true);
Long parentId = mapMenu.get(node.getId()).getParentId();
if (parentId != null)
{
NodeUserMenuTree parentNode = mapNode.get(parentId);
parentNode.setLeaf(false);
parentNode.getChildren().add(node);
}
else
{
treeList.add(node);
}
}
return treeList;
}
package com.comname.tms.security.entity;
import java.io.Serializable;
public class Menu implements Serializable
{
private Long id;
private String name;
private String url;
private Long parentId;
private Integer level;
private Integer type;
private String description;
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getUrl()
{
return url;
}
public void setUrl(String url)
{
this.url = url;
}
public Long getParentId()
{
return parentId;
}
public void setParentId(Long parentId)
{
this.parentId = parentId;
}
public Integer getLevel()
{
return level;
}
public void setLevel(Integer level)
{
this.level = level;
}
public String getDescription()
{
return description;
}
public void setDescription(String description)
{
this.description = description;
}
public Integer getType()
{
return type;
}
public void setType(Integer type)
{
this.type = type;
}
}
package com.comname.common;
import java.util.ArrayList;
import java.util.List;
import javax.xml.bind.annotation.XmlElement;
public class NodeUserMenuTree
{
private Long id;
private String url;
private String text;
private Boolean leaf = false;
private String icon = "";
private String iconCls = "nav";
private List<NodeUserMenuTree> children = new ArrayList<NodeUserMenuTree>();
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getUrl()
{
return url;
}
public void setUrl(String url)
{
this.url = url;
}
public String getText()
{
return text;
}
public void setText(String text)
{
this.text = text;
}
public Boolean getLeaf()
{
return leaf;
}
public void setLeaf(Boolean leaf)
{
this.leaf = leaf;
}
@XmlElement(name = "nodeusermenutree")
public List<NodeUserMenuTree> getChildren()
{
return children;
}
public void setChildren(List<NodeUserMenuTree> children)
{
this.children = children;
}
public String getIcon()
{
return icon;
}
public void setIcon(String icon)
{
this.icon = icon;
}
public String getIconCls()
{
return iconCls;
}
public void setIconCls(String iconCls)
{
this.iconCls = iconCls;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Win7下Android开发环境的搭建
- JavaScript定时调用函数 小知识
- 使用Gitolite搭建Git服务器
- ROS实际问题解决方法
- SpringAop_动态代理模式
- oralce sql练习
- 企业服务领域的O2O
- Transparent Hugepage造成带ToKudb引擎的Mysql无法启动
- 关于MediaPlayer中的getCurrentPosition()和seekTo(int)的总结
- 启停主从复制
- 【吐槽】关于VNCViewer的使用
- python3死活安装不了pil怎么办？
- AndroidTestCase单元测试框架用法
- U-boot中怎么添加配置菜单选项
- Bokeh快速入门(1)
- 基于DDD的开发框架Apworks
- intent.putExtra()方法参数详解
- Quick reference to HTTP headers
- 夺命雷公狗jquery---61Ajax跨域请求之方法2
- 20135302、20135315、20135323----缓冲区溢出漏洞实验（修改版）