利用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>
<!---->>

评论

36 楼 fcllingzi 2007-08-31  

非常的感谢！

35 楼 shenqiang 2007-08-06  

楼主能不能解释下是怎么复写jsp的？是不是dojo自动的？

34 楼 mailzhang 2007-07-16  

多谢多谢
学习中

33 楼 boogie 2007-07-03  

peterwillcn 写道

点击是 报错....parent.MainFrame.location.href 为空或不是对象。。。。这是什么原因

<br/>
树节点的点击动作没有配置，这里仅仅演示树

32 楼 peterwillcn 2007-07-02  

点击是 报错....parent.MainFrame.location.href 为空或不是对象。。。。这是什么原因

31 楼 ppeter 2007-06-27  

<p>

boogie 写道

当有400个节点的时候,应该说都会很慢，不仅仅是Dojo! 所以要实现动态加载，不能400个节点一次性都加载！

</p>
<p>400个节点确实确实很少啊,DOJO不实用.</p>

30 楼 boogie 2007-06-25  

应该是servlet容器报错！
我在tomcat5.028和weblogic816里测试通过！

29 楼 庄严 2007-06-24  

为什么出错呢？？
================================================================================
action b=>getChildren

action b=>getChildren

StandardWrapperValve[treeServlet]: Servlet.service() for servlet treeServlet threw exception

javax.servlet.ServletException: Servlet execution threw an exception

javax.servlet.ServletException: Servlet execution threw an exception

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:269)

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:193)

at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:243)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:566)

at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:472)

at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:943)

at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:190)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:566)

at org.apache.catalina.valves.CertificatesValve.invoke(CertificatesValve.java:246)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:564)

at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:472)

at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:943)

at org.apache.catalina.core.StandardContext.invoke(StandardContext.java:2347)

at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:180)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:566)

at org.apache.catalina.valves.ErrorDispatcherValve.invoke(ErrorDispatcherValve.java:170)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:564)

at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:170)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:564)

at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:472)

at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:943)

at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:174)

at org.apache.catalina.core.StandardPipeline.invokeNext(StandardPipeline.java:566)

at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:472)

at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:943)

at org.apache.catalina.connector.http.HttpProcessor.process(HttpProcessor.java:1027)

at org.apache.catalina.connector.http.HttpProcessor.run(HttpProcessor.java:1125)

at java.lang.Thread.run(Thread.java:536)

28 楼 boogie 2007-06-23  

当有400个节点的时候,应该说都会很慢，不仅仅是Dojo!
所以要实现动态加载，不能400个节点一次性都加载！

27 楼 pkqiang 2007-06-23  

Dojo＋JSON实现的树速度非常之慢，当有400个节点的时候，IE大概要1分钟才能处理完，不实用啊

26 楼 whistler 2007-06-19  

下载了，学习中，谢谢共享

25 楼 boogie 2007-06-19  

<p>

ppeter 写道

to lz:我将 INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1', null, 'system.gif', 'Y', ''); 改成 INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1㎡㎎㎏', null, 'system.gif', 'Y', ''); 即插入特殊符号后就出现乱码，不知道你有没有发现这个问题．

</p>
<p>这是编码问题，你把编码全部转化为UTF-8，应该就可以了！我这是演示树，就没考虑这么多了！</p>

24 楼 boogie 2007-06-19  

[e-mail] 写道

首先十分感谢LZ的分享,现提出一个问题,对节点号的处理,节点号一级节点是01,02,03...,两级是0101,0102,0103....,此节点号是自动生成的,节点号显然必须是唯一的,节点号的产生如果采用父节点+子节点的数量+1,这样产生的节点号会重复,因为用户可能先删除节点,再增加节点,这样的话新增的节点号就会重复,如果采用同一级节点中的最大节点号+1,这样如果增加删除很多,所新产生的节点号会越来越大,大家一般如何处理此类问题,是否只能任任其无限增大?

<hr/>
<br/>
你所说的节点号对应的是GNMKDM即功能模块代码，这只是个编号，我在实际环境中这个编号其实只是为了方便查询而设置的，真正起作用的是Hibernater生成的32位的ID号。

23 楼 shaoxiongwang#21cn.com 2007-06-18  

首先十分感谢LZ的分享,现提出一个问题,对节点号的处理,节点号一级节点是01,02,03...,两级是0101,0102,0103....,此节点号是自动生成的,节点号显然必须是唯一的,节点号的产生如果采用父节点+子节点的数量+1,这样产生的节点号会重复,因为用户可能先删除节点,再增加节点,这样的话新增的节点号就会重复,如果采用同一级节点中的最大节点号+1,这样如果增加删除很多,所新产生的节点号会越来越大,大家一般如何处理此类问题,是否只能任任其无限增大?

22 楼 ppeter 2007-06-04  

to lz:我将
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1', null, 'system.gif', 'Y', '');     改成
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一级目录1㎡㎎㎏', null, 'system.gif', 'Y', '');     即插入特殊符号后就出现乱码，不知道你有没有发现这个问题．

21 楼 boogie 2007-06-02  

fanth 写道

可是我怎么没有找到动态加载呢？怎么样操作可以看到动态加载的效果？

<br/>
当点击结点前的“+”时才去后台获取其子结点，以后就不会再一次的去获取！

20 楼 fanth 2007-06-01  

搂主说：

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

  可是我怎么没有找到动态加载呢？怎么样操作可以看到动态加载的效果？另外树节点上也没有右键菜单。想跟你交流一下关于DOJO树刷新的问题，不知道楼主感兴趣不。

19 楼 linginfanta 2007-05-11  

能不能支持拖拽,和加checkbox

18 楼 wshsm 2007-05-04  

好文章！再接再厉

17 楼 ancin 2007-04-19  

感谢；
学习中。