无限树形节点动态加载 ajax,利用Dojo和JSON建立无限级AJAX动态加载的功能模块树...

最新推荐文章于 2022-09-26 16:34:30 发布

体制内生存之道

最新推荐文章于 2022-09-26 16:34:30 发布

阅读量205

点赞数

文章标签：无限树形节点动态加载 ajax

本文介绍了一种利用Dojo库和JSON数据结构实现无限级AJAX动态加载的树形模块。通过在前端页面引入Dojo库并设置TreeWidget，配合后台Servlet获取并返回JSON数据，实现了树节点的动态加载。文章还提供了DEMO源码，包括树的初始化、事件处理以及后台数据获取等关键代码。

摘要由CSDN通过智能技术生成

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

更新时间：2007年03月24日 00:00:00 作者：

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

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

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

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

一、tree.jsp主要代码

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

"text/javascript" src="ajax/dojo/dojo.js">

"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");

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

div>

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);

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相关配置

dojo.sample.ContextListener

listener-class>

下载

Dojo学习笔记入门篇，第一个小例子，刚开始学习dojo的朋友可以参考下。2009-11-11

dojo 之基础篇(二)之从服务器读取数据...2007-03-03

dojo随手记 gird组件引用实现代码，需要的朋友可以参考下。2011-02-02

自定义Dojo框架的必要性：2008-09-09

Dojo 学习要点学习dojo的朋友可以参考下2010-09-09

AJAX架构之Dojo篇...2007-04-04

Ajax一统天下之Dojo整合篇...2007-03-03

Dojo之路:如何利用Dojo实现Drag and Drop效果...2007-04-04

可能很多人都对dojo只闻其名，觉得有了jquery、prototype、YUI等这些优秀的js库了，dojo还有它存在的必要吗？2011-08-08

推荐dojo学习笔记...2007-03-03