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

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

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

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

一、tree.jsp主要代码

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

@H_502_17@@H_502_17@ "text/javascript"@H_502_17@src="ajax/dojo/dojo.js"@H_502_17@>
@H_502_17@ "text/javascript" @H_502_17@>
@H_502_17@dojo.require("dojo.widget.Tree"@H_502_17@);
@H_502_17@dojo.require("dojo.widget.TreeNode"@H_502_17@);
@H_502_17@dojo.require("dojo.widget.TreeSelector"@H_502_17@);
@H_502_17@dojo.require("dojo.widget.TreeRPCController"@H_502_17@);
@H_502_17@dojo.require("dojo.widget.TreeLoadingController"@H_502_17@);
@H_502_17@dojo.require("dojo.widget.TreeContextMenu"@H_502_17@);
@H_502_17@

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

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

3、建立TreeSelector事件处理函数

@H_502_17@function@H_502_17@treeSelectFired(){
@H_502_17@//getareferencetothetreeSelectorandgettheselectednode@H_502_17@
@H_502_17@var@H_502_17@treeSelector=dojo.widget.manager.getWidgetById('treeSelector');
@H_502_17@var@H_502_17@treeNode=treeSelector.selectedNode;
@H_502_17@//getareferencetothesongDisplaydiv@H_502_17@
@H_502_17@var@H_502_17@hostDiv=document.getElementById("songDisplay"@H_502_17@);
@H_502_17@var@H_502_17@isFolder=treeNode['isFolder'];
@H_502_17@//alert(isFolder);@H_502_17@
@H_502_17@if@H_502_17@(!isFolder){
@H_502_17@var@H_502_17@song=treeNode['title'];
@H_502_17@var@H_502_17@url=treeNode['url'];
@H_502_17@link(url);
@H_502_17@}else@H_502_17@{
@H_502_17@}
@H_502_17@}

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

@H_502_17@function@H_502_17@init(){
@H_502_17@
@H_502_17@//getareferencetothetreeSelector@H_502_17@
@H_502_17@var@H_502_17@treeSelector=dojo.widget.manager.getWidgetById('treeSelector');
@H_502_17@
@H_502_17@//connecttheselecteventtothefunctiontreeSelectFired()@H_502_17@
@H_502_17@dojo.event.connect(treeSelector,'select','treeSelectFired');
@H_502_17@}
@H_502_17@
@H_502_17@dojo.addOnLoad(init);

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

1、Gnmk.java中tree的属性

@H_502_17@@H_502_17@private@H_502_17@Stringid;
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmkdm;//功能模块代码@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmksm;//功能模块说明@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmktb;//功能模块图标@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmklj;//功能模块路径@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmkmc;//功能模块名称@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmksj;//功能模块上级代码@H_502_17@
@H_502_17@
@H_502_17@private@H_502_17@Stringgnmkbz;//功能模块标志（‘N’为叶节点）@H_502_17@

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

@H_502_17@CREATE@H_502_17@TABLE@H_502_17@GNMK(IDVARCHAR@H_502_17@,GNMKDMVARCHAR@H_502_17@,GNMKMCVARCHAR@H_502_17@,GNMKLJVARCHAR@H_502_17@,GNMKTBVARCHAR@H_502_17@,GNMKBZVARCHAR@H_502_17@,GNMKSJVARCHAR@H_502_17@);
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765c30010b765d6b780001','01','一级目录1',null@H_502_17@,'system.gif','Y',''@H_502_17@);
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830001','0101','二级目录1','cxtjAction.do','N','01');
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830001','0102','二级目录2','01');
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765c30010b765d6b780002','02','一级目录2',''@H_502_17@);
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830002','0201','02');
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830002','0202','02');
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830002','020201','三级目录1','0202');
@H_502_17@INSERT@H_502_17@INTO@H_502_17@GNMKVALUES@H_502_17@('d098a59f0b765e68010b765fda830002','020202','三级目录2','0202');

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

@H_502_17@public@H_502_17@class@H_502_17@TreeServletextends@H_502_17@HttpServlet{
@H_502_17@
@H_502_17@private@H_502_17@static@H_502_17@final@H_502_17@long@H_502_17@serialVersionUID=1L;
@H_502_17@
@H_502_17@protected@H_502_17@void@H_502_17@doGet(HttpServletRequestrequest,
@H_502_17@HttpServletResponseresponse)throws@H_502_17@ServletException,IOException{
@H_502_17@Stringaction=request.getParameter("action"@H_502_17@);
@H_502_17@System.out.println("actionb=>"@H_502_17@+action);
@H_502_17@System.out.println("actionb=>"@H_502_17@+action);
@H_502_17@Stringdata=request.getParameter("data"@H_502_17@);
@H_502_17@if@H_502_17@(action.equalsIgnoreCase("getChildren"@H_502_17@)){
@H_502_17@JSONTokenerjsonTokener=new@H_502_17@JSONTokener(data);
@H_502_17@JSONObjectjsonObject=(JSONObject)jsonTokener.nextValue();
@H_502_17@JSONObjectparentNodeObject=(JSONObject)jsonObject.get("node"@H_502_17@);
@H_502_17@
@H_502_17@response.setContentType("text/json;charset=gb2312"@H_502_17@);
@H_502_17@PrintWriterout=response.getWriter();
@H_502_17@out.write(getChildren(parentNodeObject));
@H_502_17@}else@H_502_17@{
@H_502_17@}
@H_502_17@}
@H_502_17@
@H_502_17@private@H_502_17@StringgetChildren(JSONObjectparentNodeObject){
@H_502_17@JSONArrayresult=new@H_502_17@JSONArray();
@H_502_17@StringparentObjectId=parentNodeObject.getString("objectId"@H_502_17@);//id唯一@H_502_17@
@H_502_17@//StringparentWidgetId=parentNodeObject.getString("widgetId");//dm@H_502_17@
@H_502_17@parentObjectId=parentObjectId.equalsIgnoreCase("root"@H_502_17@)?""@H_502_17@
@H_502_17@:parentObjectId;
@H_502_17@System.out.println("parentObjectId=>"@H_502_17@+parentObjectId);
@H_502_17@//获取子功能模块@H_502_17@
@H_502_17@ListlistGnmk=this@H_502_17@.getGnmkByParent(parentObjectId);
@H_502_17@System.out.println("listGnmk=>"@H_502_17@+listGnmk.size());
@H_502_17@if@H_502_17@(listGnmk!=null@H_502_17@){
@H_502_17@IteratoritGnmk=listGnmk.iterator();
@H_502_17@while@H_502_17@(itGnmk.hasNext()){
@H_502_17@Gnmkqxgnmk=(Gnmk)itGnmk.next();
@H_502_17@try@H_502_17@{
@H_502_17@JSONObjectjsonGnmkObject=new@H_502_17@JSONObject();
@H_502_17@Stringgnmkbz=qxgnmk.getGnmkbz();
@H_502_17@boolean@H_502_17@isFolder=gnmkbz.equalsIgnoreCase("Y"@H_502_17@)?true@H_502_17@
@H_502_17@:false@H_502_17@;
@H_502_17@jsonGnmkObject.put("title"@H_502_17@,qxgnmk.getGnmkmc());
@H_502_17@jsonGnmkObject.put("isFolder"@H_502_17@,isFolder);
@H_502_17@jsonGnmkObject.put("widgetId"@H_502_17@,qxgnmk.getGnmkdm());
@H_502_17@jsonGnmkObject.put("objectId"@H_502_17@,qxgnmk.getGnmkdm());
@H_502_17@jsonGnmkObject.put("childIconSrc"@H_502_17@,"images/"@H_502_17@
@H_502_17@+qxgnmk.getGnmktb());
@H_502_17@jsonGnmkObject.put("url"@H_502_17@,qxgnmk.getGnmklj());
@H_502_17@result.put(jsonGnmkObject);
@H_502_17@}catch@H_502_17@(JSONExceptione){
@H_502_17@e.printStackTrace();
@H_502_17@}
@H_502_17@}
@H_502_17@}
@H_502_17@return@H_502_17@result.toString();
@H_502_17@}
@H_502_17@
@H_502_17@private@H_502_17@ListgetGnmkByParent(Stringgnmksj){
@H_502_17@GnmkDAOgnmkDao=new@H_502_17@GnmkDAO();
@H_502_17@return@H_502_17@gnmkDao.getGnmkByParent(gnmksj);
@H_502_17@}
@H_502_17@}

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

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

@H_502_17@public@H_502_17@void@H_502_17@contextInitialized(ServletContextEventevent){
@H_502_17@try@H_502_17@{
@H_502_17@//loadthedriver@H_502_17@
@H_502_17@Class.forName("org.hsqldb.jdbcDriver"@H_502_17@);
@H_502_17@//createthetableandaddsampledata@H_502_17@
@H_502_17@InputStreamReaderin=new@H_502_17@InputStreamReader(getClass().getClassLoader().getResourceAsStream("db.sql"@H_502_17@));
@H_502_17@BufferedReaderreader=new@H_502_17@BufferedReader(in);
@H_502_17@DBUtils.setupDatabase(reader);
@H_502_17@}catch@H_502_17@(ClassNotFoundExceptione){
@H_502_17@e.printStackTrace();
@H_502_17@}
@H_502_17@
@H_502_17@}

2、web.xml相关配置

@H_502_17@<listener>@H_502_17@
@H_502_17@<listener-class>@H_502_17@
@H_502_17@dojo.sample.ContextListener
@H_502_17@ listener-class>@H_502_17@
@H_502_17@ >@H_502_17@

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

猜你在找的Dojo相关文章