EasyUI-SpringMVC + EasyUI 异步树 （可借鉴）

关于异步树以前用过：Struct2 + JQuery Ztree，最新项目需要用 SpringMVC + EasyUI 生成异步树，玩了一下，特将解决方法汇报如下：

       首先，使用是EasyUI的Tree组件，官网Demo提供的异步树示例是PHP版本的，参考意义不大，

       URL为：http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem= ，有兴趣的也可以看下。

       下面开始分析业务：

       业务场景：

       

      如上，学校下面存在年级、年级下面存在班级，默认加载所有的学校，点击单个学校后，方才异步加载该学校的所有年级，点击年级后，方才加载班级。

      js / jsp文件：     

 

[javascript] view plain copy

1. <ul id="gcttree" data-options="animate:true,lines:true"></ul>  

      

[html] view plain copy

1.  $('#gcttree').tree({  
2.       //异步树   
3.     url: basePath + '/school/list_school_gct,  
4.     onBeforeExpand: function(node){  
5.         if(node){  
6.             // change the url combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;  
7.             // currentId: 当前节点id  currentType: 当前节点类型   
8.             $('#gcttree').tree('options').url = basePath + "/school/list_school_gct?currentId=" + node.id + "currentType=" + node.attributes.type;    
9.         }  
10.     }        
11. });  

 

     （注意：combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;）

     这里用到了，Tree组件的onBeforeExpand事件（API：http://www.jeasyui.com/documentation/index.php）

 

onBeforeExpand

node

Fires before node is expanded, return false to cancel this expand action.

   也即每次展开一个节点之前调用该事件，这个和上面的业务分析很契合，点击学校触发异步生成年级树，点击年级触发异步树生成班级树。

 

     controller层：

 

[java] view plain copy

1. /** 
2.      * 获取学校、年级、班级列表（异步树） 
3.      *  
4.      * @param request 
5.      * @return json数据 
6.      */  
7.     @RequestMapping(value = "/list_school_gct")  
8.     @ResponseBody  
9.     public List<Map<String, Object>> listSchoolGCT(HttpServletRequest request)   
10.     {  
11.         List<Map<String, Object>> list = null;  
12.         try   
13.         {                 
14.             // 当前节点id  
15.             String currentId = request.getParameter("currentId");  
16.               
17.             // 当前节点类型  
18.             String currentType = request.getParameter("currentType");             
19.               
20.             list = schoolService.treeData(currentId ,currentType);  
21.         } catch (Exception e)   
22.         {  
23.             logger.error(e);  
24.         }  
25.         return list;  
26.     }  

    service  / dao 层：

 

 

[java] view plain copy

1. /** 
2.      * 获取树状数据（组装tree所用  异步树） 
3.      *  
4.      * @param currentId 当前节点id 
5.      * @param currentType 当前节点类型 school=学校  grade=年级 class=班级 
6.      *              
7.      * @return 学校、年级、班级树 
8.      */   
9.     public List<Map<String, Object>> treeData(String currentId, String currentType)   
10.     {  
11.         List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();  
12.           
13.         Map<String, String> attr = null;  
14.           
15.         // 如果当前节点类型为空 则是第一次加载 即需要加载学校json  
16.         if(StringUtils.isEmpty(currentType))  
17.         {  
18.             // 查询所有的学校   
19.             list = ischoolDao.treeData();  
20.             for (Map<String, Object> school : list)   
21.             {  
22.                 attr = new HashMap<String, String>();  
23.                 attr.put("type", "school");  
24.                 school.put("attributes", attr);  
25.                 //注意此时学校节点要关闭，方能触发onBeforeExpand事件  
26.                 school.put("state", "closed");  
27.             }  
28.         }  
29.         // 如果当前节点类型为学校 则异步加载年级json  
30.         else if(StringUtils.equals("school", currentType))  
31.         {  
32.             // 根据学校id查询班级  
33.             list= igradeDao.listData(currentId);  
34.             if(!CollectionUtils.isEmpty(list))  
35.             {  
36.                 for (Map<String, Object> grade : list)   
37.                 {  
38.                     attr = new HashMap<String, String>();  
39.                     attr.put("type", "grade");                      
40.                     grade.put("attributes", attr);  
41.                     //注意此时年级节点要关闭，方能触发onBeforeExpand事件  
42.                     grade.put("state", "closed");  
43.                 }      
44.             }  
45.         }  
46.         // 如果当前节点类型为年级 则异步加载班级json  
47.         else if(StringUtils.equals("grade", currentType))  
48.         {  
49.             // 根据年级id查询班级  
50.             list = iclassDao.listData(currentId);  
51.             if(!CollectionUtils.isEmpty(list))  
52.             {  
53.                 for (Map<String, Object> classs : list)   
54.                 {  
55.                     attr = new HashMap<String, String>();  
56.                     attr.put("type", "class");                      
57.                     classs.put("attributes", attr);  
58.                 }      
59.             }  
60.         }  
61.         return list;  
62.     }  

    dao的sql很简单，就是select where语句，不再赘述。

 

      生成的Tree如图：

      

     交互过程（可以看到每次的请求交互以及返回的json）：

     

              

      综上，汇报完毕，核心就是onBeforeExpand事件的运用和service层的业务逻辑处理。