extjs springMVC实现动态树形菜单

最近由于项目需要，做一个树形动态菜单，用extjs3 来做，结合springMVC，实现从后台动态的加载数据形成权限菜单。

一、数据表设计

首先是数据库的设计，数据库表是一张权限表(即菜单表)，我把它设计成一张递归表，实现能显示父级菜单和子菜单的树形菜单，

表的设计如下：



使用pri_Id为外键，引用本表的主键，实现一张递归表。

二、Java代码中po类的设计

po类的设计对应数据表中的数据(除了外键)，用于做传送数据用。

private Integer id;//节点id
private String text;//节点名称
private boolean leaf;//是否为子节点
private String url;//节点点击的请求路径
private String cls;//节点的图标，folder还是file
private Privilige parent;//父级菜单
private Set<Privilige> children = new HashSet<Privilige>();//子菜单
//getter...setter

注意字段的名字不能变，因为返回json数据给前台时extjs会自动识别并加载。

三、前台extjs的jsp界面

Ext.QuickTips.init();//显示提示信息
//树加载器
var treeLoader = new Ext.tree.TreeLoader(
{
//获取数据库的远程地址
dataUrl:"${pageContext.request.contextPath }/Menu/showAllMenu"
});
//当点击节点时传递节点id到服务器端上
treeLoader.on("beforeload",function(treeLoader,node){
this.baseParams.nodeId = node.id;
});
//定义树
var tree = new Ext.tree.TreePanel({
id : 'tree',
animate : true,
autoScroll : true,
containerScroll : true,
lines : true,
rootVisible:false,//不显示根节点
loader:treeLoader,//加载后台数据的树加载器
expanded:true,
//根节点要用AsyncTreeNode
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text:"系统菜单",
id:"0",
leaf:false
})
});

四、设计privilige接口及实现类

public interface PrivilegeService {

/**
* 根据父级菜单的id获取其下的子菜单
*/
List<Privilige> getMenuByParentId(Integer pid);

/**
* 判断用户是否拥有某项权限
* @param sysOper 登陆的操作员
* @param menuId 权限对应的id
*/
boolean hasPermission(Systemoper sysOper,Integer menuId);

/**
* 判断角色是否拥有某项权限
*/
boolean hasPermission(Role role,Integer menuId);

/**
* 返回全部权限(菜单)数据给前台
* @param noteId
* @return
*/
List<Privilige> getAllPriviliges(Integer noteId);

}

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import net.seehope.dao.PriviligeDao;
import net.seehope.po.Privilige;
import net.seehope.po.Role;
import net.seehope.po.Systemoper;
import net.seehope.service.PrivilegeService;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class PrivilegeServiceImpl implements PrivilegeService {

@Resource
private SessionFactory sessionFactory;
@Resource
private PriviligeDao priviligeDao;

public Session getSession(){
return sessionFactory.getCurrentSession();
}

@SuppressWarnings("unchecked")
@Override
public List getAllPriviliges(Integer noteId) {
List<Privilige> topList =
(List<Privilige>) getSession()
.createQuery("From Privilige p where p.parent IS NULL").list();
//存放返回的数据集
List<Map> list = new ArrayList<Map>();
Map map = null;
if(noteId == 0){//首次加载树
//遍历所有的根节点
for (Privilige privilige : topList) {
map = new HashMap();
map.put("id", privilige.getId());
map.put("text", privilige.getText());
map.put("leaf", privilige.isLeaf());
map.put("cls", privilige.getCls());
list.add(map);
}
}else{//非首次加载树
List<Privilige> leafMenu = getMenuByParentId(noteId);//根据父节点id获取其下子节点
Map m = null;
//加载子节点
for (Privilige leafPri : leafMenu) {
m = new HashMap();
m.put("id", leafPri.getId());
m.put("text", leafPri.getText());
m.put("leaf", leafPri.isLeaf());
m.put("cls", leafPri.getCls());
m.put("url", leafPri.getUrl());
list.add(m);
}
}
return list;
}

@SuppressWarnings("unchecked")
@Override
public List<Privilige> getMenuByParentId(Integer pid) {
String hql = "FROM Privilige p where p.parent.id = ?";
List<Privilige> list = getSession().createQuery(hql)
.setParameter(0, pid).list();
return list;
}

@Override
public boolean hasPermission(Systemoper sysOper, Integer menuId) {
//拿到操作员的所有角色
for(Role role : sysOper.getSysrole()){
//拿到角色的所有权限
for(Privilige pri : role.getPriviliges()){
if(menuId.equals(pri.getId())){
return true;
}
}
}
return false;
}

@Override
public boolean hasPermission(Role role, Integer menuId) {
if(role.getPriviliges() != null && role.getPriviliges().size()>0){
for(Privilige pri : role.getPriviliges()){
if(menuId.equals(pri.getId())){
return true;
}
}
}
return false;
}
}

五、设计springMVC的控制类

import org.apache.log4j.Logger;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import net.seehope.po.Privilige;
import net.seehope.service.PrivilegeService;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
* 操作权限的action
* @author 毛健宇
* 创建日期: 2014-11-3 下午9:34:50
* @version 1.0.0
*/
@Controller
@RequestMapping("Menu")
public class PrivilegeAction {
/**
* Logger for this class
*/
private static final Logger logger = Logger.getLogger(PrivilegeAction.class);

@Resource
private PrivilegeService privilegeServiceImpl;

@RequestMapping(value="showAllMenu")
public @ResponseBody List getTopPrivileges(HttpServletRequest request){
//获得父节点的id
int nid = Integer.valueOf(request.getParameter("nodeId"));
//获取所有权限
List<Privilige> Pris = privilegeServiceImpl.getAllPriviliges(nid);
return Pris;
}
}

这样springMVC就能以json的形式来返回权限菜单数据，前台的extjs就能解析到并加载。
实现的效果如下，当点击父菜单时，会将节点id传到后台再从后台加载数据回来。



注意从springMVC返回json数据时需要用到两个jar包：

jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar