论坛首页 → Web前端技术论坛 →

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

浏览 46236 次
锁定老帖子 主题：利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • boogie
  • 等级: 三星会员
  • 性别:
  • 文章: 155
  • 积分: 253
  • 来自: 宁波
   发表时间：2006-10-08  
        看了“使用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, GNMKMC VARCHAR, GNMKLJ VARCHAR, GNMKTB VARCHAR, GNMKBZ VARCHAR, GNMKSJ VARCHAR);    
  2. INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1', null, 'system.gif', 'Y', '');    
  3. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0101', '二级目录1', 'cxtjAction.do', 'system.gif', 'N', '01');    
  4. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0102', '二级目录2', 'cxtjAction.do', 'system.gif', 'N', '01');    
  5. INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780002', '02', '一级目录2', null, 'system.gif', 'Y', '');    
  6. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0201', '二级目录1', 'cxtjAction.do', 'system.gif', 'N', '02');    
  7. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0202', '二级目录2', 'cxtjAction.do', 'system.gif', 'Y', '02');    
  8. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020201', '三级目录1', 'cxtjAction.do', 'system.gif', 'N', '0202');    
  9. INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020202', '三级目录2', 'cxtjAction.do', 'system.gif', 'N', '0202');   

3、TreeServlet .java主要代码，在getGnmkByParent(String gnmksj)方法中可以实现自己的业务，DEMO中使用GnmkDAO

 
  1. public class TreeServlet extends HttpServlet {  
  2.   
  3.     private static final long serialVersionUID = 1L;  
  4.   
  5.     protected void doGet(HttpServletRequest request,  
  6.             HttpServletResponse response) throws ServletException, IOException {  
  7.         String action = request.getParameter("action");  
  8.         System.out.println("action b=>" + action);  
  9.         System.out.println("action b=>" + action);  
  10.         String data = request.getParameter("data");  
  11.         if (action.equalsIgnoreCase("getChildren")) {  
  12.             JSONTokener jsonTokener = new JSONTokener(data);  
  13.             JSONObject jsonObject = (JSONObject) jsonTokener.nextValue();  
  14.             JSONObject parentNodeObject = (JSONObject) jsonObject.get("node");  
  15.   
  16.             response.setContentType("text/json; charset=gb2312");  
  17.             PrintWriter out = response.getWriter();  
  18.             out.write(getChildren(parentNodeObject));  
  19.         } else {  
  20.         }  
  21.     }  
  22.   
  23.     private String getChildren(JSONObject parentNodeObject) {  
  24.         JSONArray result = new JSONArray();  
  25.         String parentObjectId = parentNodeObject.getString("objectId");// id 唯一  
  26.         // String parentWidgetId = parentNodeObject.getString("widgetId");// dm  
  27.         parentObjectId = parentObjectId.equalsIgnoreCase("root") ? ""  
  28.                 : parentObjectId;  
  29.         System.out.println("parentObjectId=>" + parentObjectId);  
  30.         // 获取子功能模块  
  31.         List listGnmk = this.getGnmkByParent(parentObjectId);  
  32.         System.out.println("listGnmk=>" + listGnmk.size());  
  33.         if (listGnmk != null) {  
  34.             Iterator itGnmk = listGnmk.iterator();  
  35.             while (itGnmk.hasNext()) {  
  36.                 Gnmk qxgnmk = (Gnmk) itGnmk.next();  
  37.                 try {  
  38.                     JSONObject jsonGnmkObject = new JSONObject();  
  39.                     String gnmkbz = qxgnmk.getGnmkbz();  
  40.                     boolean isFolder = gnmkbz.equalsIgnoreCase("Y") ? true  
  41.                             : false;  
  42.                     jsonGnmkObject.put("title", qxgnmk.getGnmkmc());  
  43.                     jsonGnmkObject.put("isFolder", isFolder);  
  44.                     jsonGnmkObject.put("widgetId", qxgnmk.getGnmkdm());  
  45.                     jsonGnmkObject.put("objectId", qxgnmk.getGnmkdm());  
  46.                     jsonGnmkObject.put("childIconSrc", "images/"  
  47.                             + qxgnmk.getGnmktb());  
  48.                     jsonGnmkObject.put("url", qxgnmk.getGnmklj());  
  49.                     result.put(jsonGnmkObject);  
  50.                 } catch (JSONException e) {  
  51.                     e.printStackTrace();  
  52.                 }  
  53.             }  
  54.         }  
  55.         return result.toString();  
  56.     }  
  57.   
  58.     private List getGnmkByParent(String gnmksj) {  
  59.         GnmkDAO gnmkDao = new GnmkDAO();  
  60.         return gnmkDao.getGnmkByParent(gnmksj);  
  61.     }  
  62. }  


三、关于DEMO的其它配置说明

1、实现javax.servlet.ServletContextListener接口的contextInitialized方法来加载HSQLDB及其数据，ContextListener.java主要代码

 
  1. public void contextInitialized(ServletContextEvent event) {  
  2.     try {  
  3.         // load the driver  
  4.         Class.forName("org.hsqldb.jdbcDriver");  
  5.         // create the table and add sample data  
  6.         InputStreamReader in = new InputStreamReader(getClass().getClassLoader().getResourceAsStream("db.sql"));  
  7.         BufferedReader reader = new BufferedReader(in);  
  8.         DBUtils.setupDatabase(reader);  
  9.     } catch (ClassNotFoundException e) {  
  10.         e.printStackTrace();  
  11.     }  
  12.       
  13. }  

2、web.xml相关配置

 
  1. <listener>  
  2.     <listener-class>  
  3.        dojo.sample.ContextListener  
  4.     <!----><!---->listener-class>  
  5. <!---->>  

  • 描述: DEMO截图
  • 大小: 8.5 KB
  • dojotree.rar (2.7 MB)
  • 描述: DEMO源代码
  • 下载次数: 10914
返回顶楼
         
  • lovefanx
  • 等级: 一星会员
  • 文章: 4
  • 积分: 139
   发表时间：2006-10-11  
最好贴个截图出来，看看出来的树是什么样子的：）
返回顶楼
          回帖地址
0 请登录后投票
  • boogie
  • 等级: 三星会员
  • 性别:
  • 文章: 155
  • 积分: 253
  • 来自: 宁波
   发表时间：2006-12-30  
整理了一下重新发贴！博客编辑器在处理代码那块真是累！呵呵！
返回顶楼
          回帖地址
0 请登录后投票
  • sharon__gu
  • 等级: 初级会员
  • 文章: 1
  • 积分: 32
  • 来自: ...
   发表时间：2007-01-08  
感谢楼主，这个对我很有用阿
返回顶楼
          回帖地址
0 请登录后投票
  • pangyi
  • 等级: 一星会员
  • 性别:
  • 文章: 132
  • 积分: 120
  • 来自: 古城西安
   发表时间：2007-01-14  
非常感谢！
返回顶楼
          回帖地址
0 请登录后投票
  • Benson_Z
  • 等级: 初级会员
  • 性别:
  • 文章: 16
  • 积分: 65
  • 来自: 上海
   发表时间：2007-01-15  
感谢共享
返回顶楼
          回帖地址
0 请登录后投票
  • wangzhen
  • 等级: 初级会员
  • 文章: 1
  • 积分: 32
  • 来自: 无
   发表时间：2007-01-16  
谢谢，太有用了
返回顶楼
          回帖地址
0 请登录后投票
  • onepiece
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 82
   发表时间：2007-02-27  
多谢多谢
学习中
返回顶楼
          回帖地址
0 请登录后投票
  • lizhengfa
  • 等级: 初级会员
  • 文章: 13
  • 积分: 0
  • 来自: ...
   发表时间：2007-03-06  
你的工程在tomcat 可以正常执行,但是部署到 weblogic 上  就运行不了,请大哥看看,急用
返回顶楼
          回帖地址
0 请登录后投票
  • boogie
  • 等级: 三星会员
  • 性别:
  • 文章: 155
  • 积分: 253
  • 来自: 宁波
   发表时间：2007-03-06  
lizhengfa 写道
你的工程在tomcat 可以正常执行,但是部署到 weblogic 上  就运行不了,请大哥看看,急用

缺包commons-logging.jar，weblogic没有提供，下载附件解压放入lib目录；
修改build.xml文件，将： 
		<copy todir="${weblib.dir}" preservelastmodified="true">
			<fileset dir="${lib.dir}">
				<include name="hsqldb.jar"/>
				<include name="json*.jar"/>
                                [color=red]<include name="commons-logging.jar"/>[/color]
			</fileset>			
		</copy>
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics