easyUI+SpringMVC JPA 实现树形菜单

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

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

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

[javascript] view plain copy

1. [{      
2.     "id":1,      
3.     "text":"Folder1",      
4.     "iconCls":"icon-save",      
5.     "children":[{      
6.         "text":"File1",      
7.         "checked":true     
8.     },{      
9.         "text":"Books",      
10.         "state":"open",      
11.         "attributes":{      
12.             "url":"/demo/book/abc",      
13.             "price":100      
14.         },      
15.         "children":[{      
16.             "text":"PhotoShop",      
17.             "checked":true     
18.         },{      
19.             "id": 8,      
20.             "text":"Sub Bookds",      
21.             "state":"closed"     
22.         }]      
23.     }]      
24. },{      
25.     "text":"Languages",      
26.     "state":"closed",      
27.     "children":[{      
28.         "text":"Java"     
29.     },{      
30.         "text":"C#"     
31.     }]      
32. }]    

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

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

一、数据设计

 

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

[html] view plain copy

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

三、JQ实现easyUI

[javascript] view plain copy

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

四、后台代码实现

 数据库查询

[java] view plain copy

1. /** 
2.  * 根据父节点的值查询所有的子节点  
3.  * @param parentId 
4.  * @return 
5.  */  
6. public List<MenuPo> getMenuByParentId(String parentId) {  
7.       
8.     return menuDaoJpa.findByParentId(parentId);  
9. }  

controller层逻辑编辑

[java] view plain copy

1. /** 
2.  * 获取菜单 
3.  *  
4.  * @param request 
5.  * @param response 
6.  */  
7. @RequestMapping("/getMenu.do")  
8. @ResponseBody  
9. public List<MenuVo> getMenu(HttpServletRequest request, HttpServletResponse response) {  
10.       
11.         // 获取父节点id  
12.         List<MenuPo> menuLst = menuService.getMenuByParentId("0");  
13.           
14.         List<MenuVo> menuList = new ArrayList<MenuVo>();  
15.           
16.         // 父节点  
17.         MenuVo menuVo = new MenuVo();  
18.           
19.         // 子节点  
20.         MenuVo child;  
21.           
22.         List<MenuVo> children = new ArrayList<MenuVo>();  
23.           
24.         for(MenuPo menuPo : menuLst){  
25.             menuVo = new MenuVo();  
26.               
27.             // 父节点ID  
28.             String id = menuPo.getParentId();  
29.             // 当前节点ID  
30.             String menuId = menuPo.getMenuId();  
31.               
32.             child = new MenuVo();  
33.               
34.             // 一级菜单  
35.             if ("0".equals(id)) {  
36.                 // 节点ID  
37.                 menuVo.setId(String.valueOf(menuPo.getId()));  
38.                 //节点text  
39.                 menuVo.setText(menuPo.getName());  
40.                   
41.                 children = new ArrayList<MenuVo>();  
42.   
43.                 List<MenuPo> childLst = menuService.getMenuByParentId(menuId);  
44.                 for(MenuPo menuChild : childLst){  
45.                     // 节点ID  
46.                     child.setId(menuChild.getMenuId());  
47.                     //节点text  
48.                     child.setText(menuChild.getName());  
49.                     children.add(child);  
50.                     menuVo.setChildren(children);  
51.                 }  
52.             }   
53.             menuList.add(menuVo);  
54.         }  
55.         return menuList;  
56. }  

运行结果