`
zys08
  • 浏览: 145623 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Extjs--DWR做的动态树

    博客分类:
  • AJAX
阅读更多

前提: 对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_dwr整合例子

    ExtJS和Direct Web Remoting(DWR)是两种在Web开发中常见的技术,它们结合使用可以构建出交互性极强的富客户端应用。本压缩包文件"Extjs+Dwr"提供了一个整合ExtJS和DWR的例子,让我们来详细探讨一下这两个技术以及...

    ExtJs+ Dwr 页面登入功能

    **标题:“ExtJs+ Dwr 页面登入功能”** 在网页应用开发中,用户登录功能是不可或缺的一部分,它确保了用户身份的安全验证和访问权限的控制。本项目将讲解如何使用ExtJs(一个强大的JavaScript框架)结合DWR...

    ExtJs+Dwr(Grid)实现分页功能

    ExtJs+Dwr(Grid)实现分页功能,很实用

    extjs dwr hibernate spring

    extjs dwr hibernate spring 整合的树!

    Extjs+数据库+dwr+案例+xml

    在ExtJS应用中,DWR作为桥梁,帮助我们处理与服务器端的数据通信,使得动态更新、数据检索变得简单。 XML,全称可扩展标记语言(eXtensible Markup Language),是用于传输和存储数据的一种标准格式。在Web开发中,...

    extjs兼容dwr的代理和DWRTreeLoader

    结合DWRProxy和DWRTreeLoader,你可以实现一个完全动态的、基于DWR的ExtJS树形视图。例如,当用户展开树的一个节点时,DWRTreeLoader会自动调用DWR服务获取子节点数据,然后通过DWRProxy将结果返回给客户端,更新树...

    DWR+extjs+spring+hibernate

    在IT行业中,DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序与服务器端的Java代码进行实时交互,从而实现动态、富客户端的Web应用。EXTJS则是一个强大的JavaScript UI框架,提供了丰富的组件和...

    EXTJS 3 整合DWR (DWRProxy、DWRTreeLoader、DWRGridProxy )

    DWRTreeLoader是EXTJS中用于加载树形结构数据的类,它利用DWR的功能来动态地加载和更新TreePanel的数据。当用户展开树节点时,DWRTreeLoader会自动向服务器发送请求获取子节点数据,实现了树结构的懒加载,提高了...

    Extjs动态树的实现以及节点拖拽

    在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。这种功能在各种应用场景中非常有用,如文件系统、组织结构或层级数据...

    ExtJs完整例子ext+dwr

    ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    DWRTreeLoader通过DWR与服务器通信,动态加载或刷新树形结构的数据。它可以根据需要异步获取节点信息,使得用户界面能够实时反映服务器端数据的变化。 3. **DWRGridProxy**: 类似于DWRTreeLoader,DWRGridProxy是为...

    Spring ibatis dwr2 extjs 实例1

    本例子通过Spring容器管理ibatis dwr2的javaBean以及事务,Extjs通过dwr2来调用Spring管理类

    extjs+dwr3.0实现文件上传

    EXTJS和DWR(Direct Web Remoting)是两种在Web开发中用于构建用户界面和处理服务器端交互的技术。EXTJS是一种强大的JavaScript库,用于创建高度交互的、数据驱动的前端应用,而DWR则是一个开源框架,允许JavaScript...

    EXTJS+S2SH+DWR

    EXTJS+S2SH+DWR 是一种常见的Web应用程序开发架构,结合了三种强大的技术来构建交互性强、用户体验良好的企业级应用。以下是对这些技术及其在雇员管理系统中的应用的详细解释: 1. EXTJS:EXTJS 是一个JavaScript库...

    ExtJs+Dwr带分页分组传参后台排序功能的grid

    在本文中,我们将深入探讨如何实现一个基于ExtJS和Direct Web Remoting (DWR)的带分页、分组及后台排序功能的Grid组件。这个功能整合了多种技术,包括ExtJS、DWR、Spring和Hibernate,以创建一个高效且灵活的数据...

    dwr和EXT的整合

    本文将深入探讨DWR与EXTJS的整合过程以及它们如何协同工作,帮助开发者构建高效、动态的Web应用。 1. DWR(Direct Web Remoting) DWR是一个开源Java库,它允许开发者在JavaScript和Java之间进行直接的远程调用,...

    ExtJS DWR 入门级代码 源代码

    NULL 博文链接:https://atgoingguoat.iteye.com/blog/620103

Global site tag (gtag.js) - Google Analytics