当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 234 ::
收藏到网摘: n/a

看了“使用hibernate实现树形结构无限级分类”这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享。其实在我的博客里是老早贴出来的,由于时间关系没好好整理。
功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的。
下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DEMO,DEMO中内置HSQLDB数据库,启动时自动加载。DEMO运行截图见附件一。
一、tree.jsp主要代码
1、首先在head中导入Dojo库(dojo.js)和TreeWidget
<script>"text/javascript" src="ajax/dojo/dojo.js">
<script>"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"><!--</span-->div>
<div dojoType="TreeSelector" widgetId="treeSelector"><!--</span-->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
<!--<span class="tag"--><!--</span-->listener-class>
<!--</span-->>
dojotree.jpg
下载