前提: 对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
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');