Jquery easyui 实现动态树

本文给大家介绍jquery easyui实现动态树，本文通过代码实例相结合的方式给大家展示jquery easyui实现动态树的过程，感兴趣的朋友一起学习吧

在上篇文章给大家介绍了jquery中EasyUI实现异步树，本文给大家介绍jquery easyui实现动态树。

首先是在jsp页面中引入相关的js文件

在body中加入流程列表，通过后天拼接json数据

具体内容请看下面代码详情吧。

首选在jsp页面中引入相关的js

1. <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/default/easyui.css"> 
2. <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/icon.css"> 
3. <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery-1.4.4.min.js"></script> 
4. <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery.easyui.min.js"></script> 

添加script

1. <script> 
2. $(function(){ 
3. $('#tt2').tree({ 
4. checkbox: false, 
5. url: '<%=path%>/formconfig/loadWfNodes.do', 
6. onBeforeExpand: function(node){ 
7. $('#tt2').tree('options').url = '<%=path%>/formconfig/loadWfNodes.do?wfId='+node.id; 
8. } 
9. }); 
10. }); 
11. </script> 

在body中加入

1. <body>  
2. <ul id="tt2"> 
3. <li state="closed" id='0'><span>流程列表</span></li> 
4. </ul> 
5. </body> 

后台拼接json数据

1. package com.aegon_cnooc.oa.formconfig.action; 
2. import java.io.PrintWriter; 
3. import java.util.List; 
4. import javax.servlet.http.HttpServletRequest; 
5. import javax.servlet.http.HttpServletResponse; 
6. import org.apache.struts.action.ActionForm; 
7. import org.apache.struts.action.ActionForward; 
8. import org.apache.struts.action.ActionMapping; 
9. import com.aegon_cnooc.framework.base.action.BaseAction; 
10. import com.aegon_cnooc.oa.formconfig.service.FormConfigService; 
11. import com.aegon_cnooc.oa.ibatis.to.TuOafWfTO; 
12. import com.aegon_cnooc.oa.ibatis.to.TuOafWfnodesTO; 
13. import com.aegon_cnooc.util.StringUtil; 
14. /** 
15. * 加载流程下的节点的名称 
16. * @Author: liuxinghui 
17. * @Date: 2011-9-8 
18. * @Version: 2.0 
19. * @Despcrition: 
20. */ 
21. public class LoadWfNodesAction extends BaseAction{ 
22. private FormConfigService formConfigService; 
23. public ActionForward executeAction(ActionMapping mapping, ActionForm form, 
24. HttpServletRequest request, HttpServletResponse response) 
25. throws Exception { 
26. String wfId=request.getParameter("wfId"); 
27. String jsonstr = "["; 
28. if(StringUtil.isNotEmpty(wfId)&&"0".equals(wfId)){ 
29. List wfList=formConfigService.findWf(); 
30. for(int i=0;i<wfList.size();i++){ 
31. TuOafWfTO wfTo=(TuOafWfTO)wfList.get(i); 
32. jsonstr=jsonstr+ 
33. "{/n" + 
34. " /"id/":"+wfTo.getWfid()+",/n" +  
35. " /"text/":/"<a href='javaScript:void(0)' target='mainFrame'>"+wfTo.getWfname()+"</a>/",/n" +  
36. " /"state/":/"closed/"/n" +  
37. " },"; 
38. } 
39. int end=jsonstr.length()-1;//去掉最后一个逗号 
40. String json=jsonstr.substring(0,end); 
41. json=json+"]"; 
42. response.setContentType("application/json;charset=gbk"); 
43. response.setCharacterEncoding("gbk"); 
44. PrintWriter pw = response.getWriter(); 
45. pw.write(json); 
46. pw.flush(); 
47. }else{ 
48. List wfNodes=formConfigService.findWfNodesById(wfId); 
49. for(int i=0;i<wfNodes.size();i++){ 
50. TuOafWfnodesTO wfNodesTo=(TuOafWfnodesTO)wfNodes.get(i); 
51. jsonstr=jsonstr+ 
52. "{/n" + 
53. " /"id/":"+wfNodesTo.getNodeid()+",/n" +  
54. " /"text/":/"<a href='" + request.getContextPath()+ 
55. "/formconfig/loadGroupByWfIdAndNodeId.do?wfId="+wfId+"&nodeId="+wfNodesTo.getNodeid()+"' target='mainFrame'>"+wfNodesTo.getGenstepname()+"("+wfNodesTo.getNodeid()+")</a>/",/n" +  
56. " /"state/":/"closed/"/n" +  
57. " },"; 
58. } 
59. int end=jsonstr.length()-1;//去掉最后一个逗号 
60. String json=jsonstr.substring(0,end); 
61. json=json+"]"; 
62. response.setContentType("application/json;charset=gbk"); 
63. response.setCharacterEncoding("gbk"); 
64. PrintWriter pw = response.getWriter(); 
65. pw.write(json); 
66. pw.flush(); 
67. } 
68. return null; 
69. } 
70. public void setFormConfigService(FormConfigService formConfigService) { 
71. this.formConfigService = formConfigService; 
72. } 
73. } 

下面一段代码是EasyUI Jquery 动态加载树，点击节点加载

1. <script type="text/javascript">  
2. $(function() {  
3. $(document).ready(function() {  
4. $.post("./test/tree.action", {}, function(json) {  
5. $("#tt").tree({  
6. data : json.itemsList,  
7. onClick : function(node) {  
8. $.post("./test/tree.action", {  
9. "id" : node.id  
10. }, function(json) {  
11. $('#tt').tree('append', {  
12. parent : node.target,  
13. data : json.data  
14. });  
15. }, "json");  
16. }  
17. });  
18. }, "json");  
19. });  
20. });  
21. </script>  
22. </head>  
23. <body>  
24. <ul id="tt"></ul>  
25. </body>