Extjs--DWR做的动态树

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