前提: 对Ext和Dwr有一定的了解
环境:
1.JDK
jdk1.5.0_10
2.Jar包
dwr2.0.1.jar
commons-logging.jar
mysql-connector-java-3.1.12-bin.jar
1.DWRTreeLoader.js,
Ext.tree.DWRTreeLoader扩展了Ext.tree.TreeLoader, 扩展了对dwr的支持。
(哈, 这是外国佬写的)
/**
* @constructor
* @param {Object}
* config A config object
* @cfg dwrCall the DWR function to call when loading the nodes
*/
Ext.tree.DWRTreeLoader = function(config) {
Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, {
load : function(node, callback){
if(this.clearOnLoad){
while(node.firstChild){
node.removeChild(node.firstChild);
}
}
if(node.attributes.children){ // preloaded json children
var cs = node.attributes.children;
for(var i = 0, len = cs.length; i < len; i++){
node.appendChild(this.createNode(cs[i]));
}
if(typeof callback == "function"){
callback();
}
}else if(this.dwrCall){
this.requestData(node, callback);
}
},
/**
* Performs the actual load request
*
* @param {Object}
* node node for which child elements should be retrieved
* @param {Function}
* callback function that should be called before executing the
* DWR call
*/
requestData : function(node, callback) {
if (this.fireEvent("beforeload", this, node, callback) !== false) {
var callParams = new Array();
var success = this.handleResponse.createDelegate(this, [node, callback], 1);
var error = this.handleFailure.createDelegate(this, [node, callback], 1);
var params = this.getParams(node);
for (key in params) {
callParams.push(params[key]);
}
callParams.push({callback:success, errorHandler:error});
this.transId=true;
this.dwrCall.apply(this, callParams);
} else {
// if the load is cancelled, make sure we notify
// the node that we are done
if (typeof callback == "function") {
callback();
}
}
},
/**
* Override this to add custom request parameters. Default adds the node id as
* first and only parameter
*/
getParams : function(node) {
return {
id : node.id//,
//searchParam : node.attributes.searchParam
};
},
/**
* Process the response that server sent back via DWR.
*
* @param {Object}
* response data that was sent back by the server that contains the
* child nodes
* @param {Object}
* node parent node to which child nodes will be appended
* @param {Function}
* callback callback that will be performed after appending the nodes
*/
processResponse : function(response, node, callback){
try {
for(var i = 0; i < response.length; i++){
var n = this.createNode(response[i]);
if(n){
node.appendChild(n);
}
}
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
},
/**
* Handles a sucessful response.
*
* @param {Object}
* response data that was sent back by the server that contains the
* child nodes
* @param {Object}
* node parent node to which child nodes will be appended
* @param {Function}
* callback callback that will be performed after appending the nodes
*/
handleResponse : function(response, node, callback){
this.transId = false;
this.processResponse(response, node, callback);
this.fireEvent("load", this, node, response);
},
/**
* Handles load error
*
* @param {Object}
* response data that was sent back by the server that contains the
* child nodes
* @param {Object}
* node parent node to which child nodes will be appended
* @param {Function}
* callback callback that will be performed after appending the nodes
*/
handleFailure : function(response, node, callback){
this.transId = false;
this.fireEvent("loadexception", this, node, response);
if(typeof callback == "function"){
callback(this, node);
}
}
});
2.jsp页面添加一个用于显示树的div
<div id="tree_list"></div>
3.在页面tree_list处生成树的ext代码
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.BLANK_IMAGE_URL = "../images/ext2/default/s.gif";
// 生成树
var treePanel = new Ext.tree.TreePanel( {
el : "tree_list",
border : false,
animate : true,
autoHeight : true,
rootVisible : false,
autoScroll : true,
containerScroll : true,
loader : new Ext.tree.DWRTreeLoader( {
dwrCall : DwrTreeBB.getOrgTree // 获取树的dwr方法
//dwrCall : DwrTreeBB.getOrgTree1
}),
root : new Ext.tree.AsyncTreeNode( {
id : "0",
text : "根目录"
})
});
treePanel.render();
// 树结点加载前
/*treePanel.on("beforeload", function(node) {
node.attributes.searchParam = node.attributes.param;
});*/
});
DwrTreeBB的getOrgTree方法传入的参数, 对应于DWRTreeLoader中
getParams : function(node) {
return {
id : node.id//,
//searchParam : node.attributes.searchParam
};
}
的{}对象的参数, 名字可以不一样, 但传值的顺序是一致的。
4.树说明
加载或展开节点只查询下一级的节点, 而不是全部一次性查出, 这样提高了查询效率。
每个节点在第一次展开时会执行一次DwrTreeBB.getOrgTree方法。
5.如果想自己添加一些额外的参数, 可以去掉
/*treePanel.on("beforeload", function(node) {
node.attributes.searchParam = node.attributes.param;
});*/
和
getParams : function(node) {
return {
id : node.id//,
//searchParam : node.attributes.searchParam
};
}
中的注释,
将DwrTreeBB.getOrgTree改为DwrTreeBB.getOrgTree1调用getOrgTree1方法。
总之, 参数可以根据自己需要定制。
下面是数据库表:
/*
MySQL Data Transfer
Source Host: localhost
Source Database: ceims
Target Host: localhost
Target Database: ceims
Date: 2011-6-28 19:42:03
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for org
-- ----------------------------
DROP TABLE IF EXISTS `org`;
CREATE TABLE `org` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`orgName` varchar(30) NOT NULL,
`isLeaf` char(1) NOT NULL,
`pId` bigint(20) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `org_ibfk_1` (`pId`),
CONSTRAINT `org_ibfk_1` FOREIGN KEY (`pId`) REFERENCES `org` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `org` VALUES ('1', '机构目录 ', '0', '0');
INSERT INTO `org` VALUES ('2', '目录1', '0', '1');
INSERT INTO `org` VALUES ('3', '目录2', '0', '1');
INSERT INTO `org` VALUES ('4', '目录11', '1', '2');
INSERT INTO `org` VALUES ('5', '目录12', '1', '2');
INSERT INTO `org` VALUES ('6', '目录22', '1', '3');
分享到:
相关推荐
ExtJS和Direct Web Remoting(DWR)是两种在Web开发中常见的技术,它们结合使用可以构建出交互性极强的富客户端应用。本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子,让我们来详细探讨一下这两个技术以及...
**标题:“ExtJs+ Dwr 页面登入功能”** 在网页应用开发中,用户登录功能是不可或缺的一部分,它确保了用户身份的安全验证和访问权限的控制。本项目将讲解如何使用ExtJs(一个强大的JavaScript框架)结合DWR...
ExtJs+Dwr(Grid)实现分页功能,很实用
extjs dwr hibernate spring 整合的树!
在ExtJS应用中,DWR作为桥梁,帮助我们处理与服务器端的数据通信,使得动态更新、数据检索变得简单。 XML,全称可扩展标记语言(eXtensible Markup Language),是用于传输和存储数据的一种标准格式。在Web开发中,...
结合DWRProxy和DWRTreeLoader,你可以实现一个完全动态的、基于DWR的ExtJS树形视图。例如,当用户展开树的一个节点时,DWRTreeLoader会自动调用DWR服务获取子节点数据,然后通过DWRProxy将结果返回给客户端,更新树...
在IT行业中,DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序与服务器端的Java代码进行实时交互,从而实现动态、富客户端的Web应用。EXTJS则是一个强大的JavaScript UI框架,提供了丰富的组件和...
DWRTreeLoader是EXTJS中用于加载树形结构数据的类,它利用DWR的功能来动态地加载和更新TreePanel的数据。当用户展开树节点时,DWRTreeLoader会自动向服务器发送请求获取子节点数据,实现了树结构的懒加载,提高了...
在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。这种功能在各种应用场景中非常有用,如文件系统、组织结构或层级数据...
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
DWRTreeLoader通过DWR与服务器通信,动态加载或刷新树形结构的数据。它可以根据需要异步获取节点信息,使得用户界面能够实时反映服务器端数据的变化。 3. **DWRGridProxy**: 类似于DWRTreeLoader,DWRGridProxy是为...
本例子通过Spring容器管理ibatis dwr2的javaBean以及事务,Extjs通过dwr2来调用Spring管理类
EXTJS和DWR(Direct Web Remoting)是两种在Web开发中用于构建用户界面和处理服务器端交互的技术。EXTJS是一种强大的JavaScript库,用于创建高度交互的、数据驱动的前端应用,而DWR则是一个开源框架,允许JavaScript...
EXTJS+S2SH+DWR 是一种常见的Web应用程序开发架构,结合了三种强大的技术来构建交互性强、用户体验良好的企业级应用。以下是对这些技术及其在雇员管理系统中的应用的详细解释: 1. EXTJS:EXTJS 是一个JavaScript库...
在本文中,我们将深入探讨如何实现一个基于ExtJS和Direct Web Remoting (DWR)的带分页、分组及后台排序功能的Grid组件。这个功能整合了多种技术,包括ExtJS、DWR、Spring和Hibernate,以创建一个高效且灵活的数据...
本文将深入探讨DWR与EXTJS的整合过程以及它们如何协同工作,帮助开发者构建高效、动态的Web应用。 1. DWR(Direct Web Remoting) DWR是一个开源Java库,它允许开发者在JavaScript和Java之间进行直接的远程调用,...
NULL 博文链接:https://atgoingguoat.iteye.com/blog/620103