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

描述: DEMO截图
大小: 8.5 KB

dojotree.rar (2.7 MB)
描述: DEMO源代码
下载次数: 9017

查看图片附件

转载于:https://www.cnblogs.com/mylem/archive/2009/11/15/1603258.html

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

jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
html select ajax,AJAX 动态加载后台数据绑定select的方法
直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...
Python爬取东方财富网任意股票任意时间段的Ajax动态加载股票数据
导言最近由于需求想爬取以下东方财富网的股票数据,但是发现没有想象那么简单,接下来我会讲述一下我遇到的问题以及是如何解决,最后成功的爬出了想要的数据. 查看网页源码首先我们F12打开东方财富网网页源 ...
python翻页功能url不变_爬取Ajax动态加载和翻页时url不变的网页
这两天投了一家公司的爬虫实习生,笔试题是完成一个爬虫的小需求.网站没有什么反爬的高级技巧.但是有非常常见的,并不是针对我们爬虫的,却让我们新手很难理解的ajax动态加载技术和乍一看不明白的翻页时不变的 ...
关于使用scrapy框架编写爬虫以及Ajax动态加载问题、反爬问题解决方案
关于使用scrapy框架编写爬虫以及Ajax动态加载问题.反爬问题解决方案参考文章: (1)关于使用scrapy框架编写爬虫以及Ajax动态加载问题.反爬问题解决方案 (2)https://www. ...
ajax 动态加载的内容，相应的js也要在回调里加载
ajax 动态加载的内容,相应的js也要在回调里加载,不然之前已经写好的监听函数,其实没有绑定到后来动态加载的元素上的,所以要写成回调的形式比如: $(".getStudent") ...
ajax动态拼接复选框样式,JavaScript 通过Ajax 动态加载CheckBox复选框
废话不多说了,直接给大家贴代码了,具体代码如下所示: //动态加载年份checkbox by dongch 20170830 function GetCompareYearByStationName( ...
python爬虫之Ajax动态加载数据抓取--豆瓣电影/腾讯招聘
动态加载数据抓取-Ajax 特点 1.右键 -> 查看网页源码中没有具体数据 2.滚动鼠标滑轮或其他动作时加载抓取 1.F12打开控制台,页面动作抓取网络数据包 2.抓取json文件URL地址 ...
爬取通过ajax动态加载的页面（实时监控华尔街见闻资讯与快讯）
学习了几天如何使用scrapy去爬取静态网站,今天尝试去爬取动态加载的网站.选取的网站是华尔街见闻,文中不会像往常一样大篇幅讲解每一步该如何做,而是探讨如何爬取. 在源代码中无法获得全部数据(有的根本 ...
ASP.NET 动态加载WebService功能
在某些情况下,我们不能修改项目,重新引入一个WebService,然后再修改代码编译.所以最好解决办法是,通过一个小的dll,或者是cs文件,来实现动态加载webservice,这样现有项目,只需要在 ...

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

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

最新文章

热门文章