樹控制元件在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#"   
    }]    
}]  
 

下面就以springMVC JPA為基礎，實現樹形控制元件。

一、資料設計

二、前臺JSP，很簡單，就一div就可以。

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

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

 資料庫查詢

	/**
	 * 根據父節點的值查詢所有的子節點 
	 * @param parentId
	 * @return
	 */
	public List<MenuPo> getMenuByParentId(String parentId) {
		
		return menuDaoJpa.findByParentId(parentId);
	}
 

    /**
     * 獲取選單
     * 
     * @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;
    }
 

執行結果