日期:2014-05-16  浏览次数:20418 次

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
看了“使用hibernate实现树形结构无限级分类”这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享。其实在我的博客里是老早贴出来的,由于时间关系没好好整理。

       功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的。

        下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DEMO,DEMO中内置HSQLDB数据库,启动时自动加载。DEMO运行截图见附件一。

一、tree.jsp主要代码

1、首先在head中导入Dojo库(dojo.js)和TreeWidget

1.<script type=< span="">"text/javascript" src="ajax/dojo/dojo.js"> 
2.<script type=<span class="string">"text/javascript"> 
3.dojo.require("dojo.widget.Tree"); 
4.dojo.require("dojo.widget.TreeNode"); 
5.dojo.require("dojo.widget.TreeSelector"); 
6.dojo.require("dojo.widget.TreeRPCController"); 
7.dojo.require("dojo.widget.TreeLoadingController"); 
8.dojo.require("dojo.widget.TreeContextMenu"); 
9.</script> 

2、在body中放置TreeWidget,TreeLoadingController中的RPCUrl="treeServlet"为从后台获取数据的servlet名称,TreeNode中的expandLevel表示树初始张开级别

1.<div dojoType="TreeLoadingController" RPCUrl="treeServlet" widgetId="treeController" DNDController="create">div> 
2.<div dojoType="TreeSelector" widgetId="treeSelector">div> 
3.<div dojoType="Tree" DNDMode="between" selector="treeSelector" widgetId="bandTree" controller="treeController"> 
4.<div dojoType="TreeNode" title="root" widgetId="root" objectId="root" isFolder="true" childIconSrc="images/comm.gif" expandLevel="1"/> 

3、建立TreeSelector事件处理函数

1.function treeSelectFired() { 
2.    // get a reference to the treeSelector and get the selected node  
3.    var treeSelector = dojo.widget.manager.getWidgetById('treeSelector'); 
4.    var treeNode = treeSelector.selectedNode; 
5.    // get a reference to the songDisplay div 
6.    var hostDiv = document.getElementById("songDisplay"); 
7.    var isFolder = treeNode['isFolder']; 
8.    //alert(isFolder); 
9.    if ( !isFolder) { 
10.       var song = treeNode['title']; 
11.       var url = treeNode['url']; 
12.       link(url); 
13.    } else {  
14.    } 
15.} 

4、将select事件处理函数关联到treeSelector

1.function init() {  
2. 
3.    //get a reference to the treeSelector 
4.    var treeSelector = dojo.widget.manager.getWidgetById('treeSelector'); 
5. 
6.    //connect the select event to the function treeSelectFired() 
7.    dojo.event.connect(treeSelector,'select','treeSelectFired');  
8.} 
9. 
10.dojo.addOnLoad(init); 


二、主要java代码及数据结构

1、Gnmk.java中tree的属性

1. private String id;   
2.  
3. private String gnmkdm;  //功能模块代码 
4. 
5.private String gnmksm;  //功能模块说明 
6.  
7.private String gnmktb;  //功能模块图标 
8. 
9. private String gnmklj;  //功能模块路径 
10.  
11. private String gnmkmc;  //功能模块名称 
12.   
13.private String gnmksj;  //功能模块上级代码 
14.  
15.private String gnmkbz;  //功能模块标志(‘N’为叶节点) 

2、HSQLDB内存数据库加载SQL(db.sql)

1.CREATE TABLE GNMK (ID VARCHAR, GNMKDM VARCHAR, GNMK