easyUI+SpringMVC JPA 实现树形菜单

树控件在web页面中一个将分层数据以树形结构进行显示。根据 easyUI API可以得知，树控件的每个节点都具备以下属性

• id：节点ID，对加载远程数据很重要。
• text：显示节点文本。
• state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
• checked：表示该节点是否被选中。
• attributes: 被添加到节点的自定义属性。
• children: 一个节点数组声明了若干节点。

同时，树控件的数据结构是下面的形式

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]  

从上面的代码可以看出，树控件的数据是json类型的，属性children也是json类型的。

下面就以springMVC JPA为基础，实现树形控件。

一、数据设计

 

二、前台JSP，很简单，就一div就可以。

<div id="t1"></div>

三、JQ实现easyUI

$(function(){
   $("#t1").tree({ 
    url:$('#ctx').val()+'/menu/getMenu.do'
    });
});

四、后台代码实现

 数据库查询

	/**
	 * 根据父节点的值查询所有的子节点 
	 * @param parentId
	 * @return
	 */
	public List<MenuPo> getMenuByParentId(String parentId) {
		
		return menuDaoJpa.findByParentId(parentId);
	}

controller层逻辑编辑

    /**
     * 获取菜单
     * 
     * @param request
     * @param response
     */
    @RequestMapping("/getMenu.do")
    @ResponseBody
    public List<MenuVo> getMenu(HttpServletRequest request, HttpServletResponse response) {
        
            // 获取父节点id
            List<MenuPo> menuLst = menuService.getMenuByParentId("0");
            
            List<MenuVo> menuList = new ArrayList<MenuVo>();
            
            // 父节点
            MenuVo menuVo = new MenuVo();
            
            // 子节点
            MenuVo child;
            
            List<MenuVo> children = new ArrayList<MenuVo>();
            
            for(MenuPo menuPo : menuLst){
                menuVo = new MenuVo();
                
                // 父节点ID
                String id = menuPo.getParentId();
                // 当前节点ID
                String menuId = menuPo.getMenuId();
                
                child = new MenuVo();
                
                // 一级菜单
                if ("0".equals(id)) {
                    // 节点ID
                    menuVo.setId(String.valueOf(menuPo.getId()));
                    //节点text
                    menuVo.setText(menuPo.getName());
                    
                    children = new ArrayList<MenuVo>();

                    List<MenuPo> childLst = menuService.getMenuByParentId(menuId);
                    for(MenuPo menuChild : childLst){
                        // 节点ID
                        child.setId(menuChild.getMenuId());
                        //节点text
                        child.setText(menuChild.getName());
                        children.add(child);
                        menuVo.setChildren(children);
                    }
                } 
                menuList.add(menuVo);
            }
            return menuList;
    }

运行结果