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

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

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

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

一、tree.jsp主要代码

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

<script type=< span="">"text/javascript" src="ajax/dojo/dojo.js">
<script type=<span class="string">"text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeLoadingController");
dojo.require("dojo.widget.TreeContextMenu");
</script>

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

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

3、建立TreeSelector事件处理函数

function treeSelectFired() {
    // get a reference to the treeSelector and get the selected node
    var treeSelector = dojo.widget.manager.getWidgetById('treeSelector');
    var treeNode = treeSelector.selectedNode;
    // get a reference to the songDisplay div
    var hostDiv = document.getElementById("songDisplay");
    var isFolder = treeNode['isFolder'];
    //alert(isFolder);
    if ( !isFolder) {
       var song = treeNode['title'];
       var url = treeNode['url'];
       link(url);
    } else {
    }
}

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

function init() {

    //get a reference to the treeSelector
    var treeSelector = dojo.widget.manager.getWidgetById('treeSelector');

    //connect the select event to the function treeSelectFired()
    dojo.event.connect(treeSelector,'select','treeSelectFired');
}

dojo.addOnLoad(init);

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

1、Gnmk.java中tree的属性

 private String id;

 private String gnmkdm;  //功能模块代码

private String gnmksm;  //功能模块说明

private String gnmktb;  //功能模块图标

 private String gnmklj;  //功能模块路径

 private String gnmkmc;  //功能模块名称

private String gnmksj;  //功能模块上级代码

private String gnmkbz;  //功能模块标志（‘N’为叶节点）

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

CREATE TABLE GNMK (ID VARCHAR, GNMKDM VARCHAR, GNMKMC VARCHAR, GNMKLJ VARCHAR, GNMKTB VARCHAR, GNMKBZ VARCHAR, GNMKSJ VARCHAR);
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1', null, 'system.gif', 'Y', '');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0101', '二级目录1', 'cxtjAction.do', 'system.gif', 'N', '01');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0102', '二级目录2', 'cxtjAction.do', 'system.gif', 'N', '01');
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780002', '02', '一级目录2', null, 'system.gif', 'Y', '');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0201', '二级目录1', 'cxtjAction.do', 'system.gif', 'N', '02');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0202', '二级目录2', 'cxtjAction.do', 'system.gif', 'Y', '02');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020201', '三级目录1', 'cxtjAction.do', 'system.gif', 'N', '0202');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020202', '三级目录2', 'cxtjAction.do', 'system.gif', 'N', '0202');

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

public class TreeServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        System.out.println("action b=>" + action);
        System.out.println("action b=>" + action);
        String data = request.getParameter("data");
        if (action.equalsIgnoreCase("getChildren")) {
            JSONTokener jsonTokener = new JSONTokener(data);
            JSONObject jsonObject = (JSONObject) jsonTokener.nextValue();
            JSONObject parentNodeObject = (JSONObject) jsonObject.get("node");

            response.setContentType("text/json; charset=gb2312");
            PrintWriter out = response.getWriter();
            out.write(getChildren(parentNodeObject));
        } else {
        }
    }

    private String getChildren(JSONObject parentNodeObject) {
        JSONArray result = new JSONArray();
        String parentObjectId = parentNodeObject.getString("objectId");// id 唯一
        // String parentWidgetId = parentNodeObject.getString("widgetId");// dm
        parentObjectId = parentObjectId.equalsIgnoreCase("root") ? ""
                : parentObjectId;
        System.out.println("parentObjectId=>" + parentObjectId);
        // 获取子功能模块
        List listGnmk = this.getGnmkByParent(parentObjectId);
        System.out.println("listGnmk=>" + listGnmk.size());
        if (listGnmk != null) {
            Iterator itGnmk = listGnmk.iterator();
            while (itGnmk.hasNext()) {
                Gnmk qxgnmk = (Gnmk) itGnmk.next();
                try {
                    JSONObject jsonGnmkObject = new JSONObject();
                    String gnmkbz = qxgnmk.getGnmkbz();
                    boolean isFolder = gnmkbz.equalsIgnoreCase("Y") ? true
                            : false;
                    jsonGnmkObject.put("title", qxgnmk.getGnmkmc());
                    jsonGnmkObject.put("isFolder", isFolder);
                    jsonGnmkObject.put("widgetId", qxgnmk.getGnmkdm());
                    jsonGnmkObject.put("objectId", qxgnmk.getGnmkdm());
                    jsonGnmkObject.put("childIconSrc", "images/"
                            + qxgnmk.getGnmktb());
                    jsonGnmkObject.put("url", qxgnmk.getGnmklj());
                    result.put(jsonGnmkObject);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }
        return result.toString();
    }

    private List getGnmkByParent(String gnmksj) {
        GnmkDAO gnmkDao = new GnmkDAO();
        return gnmkDao.getGnmkByParent(gnmksj);
    }
}

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

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

public void contextInitialized(ServletContextEvent event) {
    try {
        // load the driver
        Class.forName("org.hsqldb.jdbcDriver");
        // create the table and add sample data
        InputStreamReader in = new InputStreamReader(getClass().getClassLoader().getResourceAsStream("db.sql"));
        BufferedReader reader = new BufferedReader(in);
        DBUtils.setupDatabase(reader);
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    }

}

2、web.xml相关配置

<listener>
    <listener-class>
       dojo.sample.ContextListener
    <!----><!---->listener-class>
<!---->>

评论

16 楼 onekey 2007-03-31  

不好意思，是我没有引用apache.commons.logging.LogFactory

15 楼 onekey 2007-03-31  

JSONObject jsonObject = (JSONObject) jsonTokener.nextValue();

这一行出错了：Source not found for ApplicationFilterChain.internalDoFilter(ServletRequest, ServletResponse) line: 311

为什么呢？

14 楼 wanglidhx 2007-03-29  

怎么这么及时呀.
镇不知道该怎么感谢，我要尽快让它运行起来。

13 楼 xhcat1025 2007-03-27  

感谢共享

12 楼 xuygfbi 2007-03-23  

好东西啊

11 楼 zack 2007-03-09  

感谢楼主哦，下载了仔细来看一看

10 楼 boogie 2007-03-06  

lizhengfa 写道

你的工程在tomcat 可以正常执行,但是部署到 weblogic 上  就运行不了,请大哥看看,急用

<br/>
<br/>
缺少commons-logging.jar包，WEBLOGIC没有提供！<br/>
<br/>
1、将commons-logging.jar放入lib目录，附件提供下载；<br/>
2、修改build.xml文件中目标build的COPY部分，打包时将commons-logging.jar复制到webapp\WEB-INF\lib下：<br/>
&lt;include name="commons-logging.jar"/&gt;

9 楼 boogie 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>

8 楼 lizhengfa 2007-03-06  

你的工程在tomcat 可以正常执行,但是部署到 weblogic 上  就运行不了,请大哥看看,急用

7 楼 onepiece 2007-02-27  

多谢多谢
学习中

6 楼 wangzhen 2007-01-16  

谢谢，太有用了

5 楼 Benson_Z 2007-01-15  

感谢共享

4 楼 pangyi 2007-01-14  

非常感谢！

3 楼 sharon__gu 2007-01-08  

感谢楼主，这个对我很有用阿

2 楼 boogie 2006-12-30  

整理了一下重新发贴！博客编辑器在处理代码那块真是累！呵呵！

1 楼 lovefanx 2006-10-11  

最好贴个截图出来，看看出来的树是什么样子的：）