异步(ajax)动态加载无限级联树(tree)代码示例

网上很多示例都是用tree控件的各种事件去修改url参数实现的，这里介绍一种前端最简单的实现方法。

在前端不写任何多余的代码。前端代码非常简单，如下：

HTML和JS代码:

1. <</span>ul id="tt4"></</span>ul> 

1. $(function(){ 
2.     $('#tt4').tree({ 
3.         date:[{"id":1 , "text":"Folder1"}], 
4.         url: '/egov/egs/prm/citizen-treedemo-ajax.action?id=' 
5.     }); 
6. }); 

 重点在后台代码,先说下原理。

第一次访问当然ID是空的，这时候判断ID为空就默认使用根节点查找，当然根节点的ID是多少一般是固定的。

以后再点击前台树(tree)的节点(node)时，展开文件夹的时候树控件，会自动将点击的ID传到后台，这个应该是easyui的tree默认的一个特性。

下面是后台代码，这里是JAVA实现： 

1.  
2. public String treeDemoAjax() { 
3.     // 获取ID 
4.     String id = this.getString("id"); 
5.     TreeNode treeNode = null; 
6.     String treeJson = ""; 
7.     // 如果是空，就默认根目录 
8.     if (StringUtils.isBlank(id)) { 
9.         treeNode = new TreeNode("0", "模块根目录"); 
10.         List treeChildren = queryAjaxTreeChildren(treeNode); 
11.         treeNode.setChildren(treeChildren); 
12.         treeJson = new JsonObject(treeNode).toString(); 
13.     } else { 
14.         // 加载子节点 
15.         treeNode = new TreeNode(id, ""); 
16.         List treeChildren = queryAjaxTreeChildren(treeNode); 
17.         treeJson = new JsonArray(treeChildren).toString(); 
18.         if (!StringUtils.isBlank(treeJson) && treeJson.length() > 2) { 
19.             treeJson = treeJson.substring(1); 
20.             treeJson = treeJson.substring(0, treeJson.length() - 1); 
21.         } 
22.     } 
23.     this.put("msg", "[" + treeJson + "]"); 
24.     return Action.SUCCESS; 
25. } 

上面的queryAjaxTreeChildren 函数为递归查找子节点。

函数实现如下： 

1.  
2. private List queryTreeChildren(TreeNode pNode) { 
3.     List treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); 
4.     List treeNodeList = new ArrayList(); 
5.     if (treeData != null && treeData.size() > 0) { 
6.         for (Hashtable ht : treeData) { 
7.             String id = (String) ht.get("id"); 
8.             String text = (String) ht.get("text"); 
9.             TreeNode childNode = new TreeNode(id, text); 
10.             treeNodeList.add(childNode); 
11.         } 
12.     } 
13.     return treeNodeList; 
14. }  
16.  
17.  
18. private List queryAjaxTreeChildren(TreeNode pNode) { 
19.     List treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); 
20.     List treeNodeList = new ArrayList(); 
21.     if (treeData != null && treeData.size() > 0) { 
22.         for (Hashtable ht : treeData) { 
23.             String id = (String) ht.get("id"); 
24.             String text = (String) ht.get("text"); 
25.             TreeNode childNode = new TreeNode(id, text); 
26.             // 查询子节点的是否有子节点 
27.             List childNodeChildren = queryTreeChildren(childNode); 
28.             if (childNodeChildren.size() > 0) { 
29.                 childNode.setState(TreeNode.STATE_CLOSED); 
30.             } 
31.             treeNodeList.add(childNode); 
32.         } 
33.     } 
34.     return treeNodeList; 
35. } 

注意这里我们需要判断子节点是否还有子节点，因为这样我们才能判断在界面上是将节点显示成文件还是文件夹。

这里对easyui 树的节点JAVA代码封装模型TreeNode的代码看这里：http://luju.me/easyui/tree_for_javacode.html