`
achui_1980
  • 浏览: 18602 次
  • 来自: ...
社区版块
存档分类
最新评论

ExtJs的TreePanel的分页的思路和实现

阅读更多

Ext的Tree组件很好用,但是当节点多的时候,加载会很慢,如果能够带上分页的话,那就很好了,于是我想对Tree组件进行扩展,使之能够实现分页,这样就可以解决节点多的时候,页面加载速度的问题了

 

我的分页思路比较简单,就是对最顶层的根节点进行分页,也就是root节点,通过前台传过去的分页参数,在后台将数据按页读取出来,然后再前台的根节点下面展现出来,来实现分页的效果,至于后来的分页如何实现,就不在本文章的讨论范围内。本文章只讨论前台的展现。

 

实现思路:

由于Tree组件是通过TreePanel来展现的,而TreePanel有个bbar属性,可以放PagingToolbar对象,因此我们可以把分页组件树页面展现出来了,但是PagingToolbar的分页是需要通过Store来支持的,而我们的Tree组件是没有Store,只有loder,因此主要的着手点就在于构造一个可以让PagingToolbar分页时可以识别,并且能够自动调用loader获取节点的Store就可以,因为tree组件的laod方法,可以读取出节点,并展现成熟,因此只要store在load的时候,能够把节点load出来就可以,所以基本的做法就是在Store的load方法中调用tree组件的loader的load方法获取节点并展现,这是把需要分页的参数传到后来即可。思路是挺简单的,接下来看看实现的代码

 

/**
 * 树分页数据源加载器,只对最顶层根节点进行分页,这意味着,子节点的节点数目不能太多,否则会有性能问题
 * @class Ext.tree.TreeLoaderStore
 * @extends Ext.data.Store
 */
Ext.tree.TreeLoaderStore = Ext.extend(Ext.data.Store,{
	/**
	 * 加载数据源的数据对象,是树结构的loader
	 * @type  Ext.tree.TreePagingLoader
	 */
	loader:null,
	/**
	 * 树的根节点,最顶的节点
	 * @type Ext.tree.AsyncTreeNode
	 */
	rootNode:null,
	constructor : function(config){
	 	Ext.tree.TreeLoaderStore.superclass.constructor.call(this);
	 	this.loader = config.loader;
	 	this.rootNode = config.rootNode;
	 },
	 load:function(options){
	 	var _self = this;
	 	if(!this.loader || !this.rootNode){
	 		Ext.MessageBox.alert("错误","必须指定loader或者rootNode");
	 		return false;
	 	}
	 	Ext.apply(this.loader.baseParams,{start:options.params.start,limit:options.params.limit}),
	 	this.loader.load(this.rootNode,function(node){
	 		_self.currentCount = _self.loader.currentCount;
	 		_self.totalLength = _self.loader.totalCount;
	 		node.expand();
	 		_self.fireEvent("load",_self,null,options);
	 		delete _self;
	 	});
	 	return true;
	 },
	 getCount : function(){
        return this.currentCount || 0;
     },
     getTotalCount : function(){
        return this.totalLength || 0;
    }
})

Ext.tree.TreePagingLoader = Ext.extend(Ext.tree.TreeLoader,{
    processResponse : function(response, node, callback, scope){
        var json = response.responseText;
        try {
            var o = response.responseData || Ext.decode(json);
            //TODO:暂时从后台获取当前页的记录数,通过currentCount属性获取
            //最佳做法是效仿pagingToolbar的做法,在客户端获取
            //目前的障碍是,loader还没读取完,翻页的工具栏已经初始化了,导致当前页记录数无法获取
            //有空再继续修改,思路是把loader当store来用
            this.totalCount = o.totalCount;
            this.currentCount = o.data.length;
            var o = o.data;
            node.beginUpdate();
            for(var i = 0, len = o.length; i < len; i++){
                var n = this.createNode(o[i]);
                if(n){
                    node.appendChild(n);
                }
            }
            node.endUpdate();
            this.runCallback(callback, scope || node, [node]);
        }catch(e){
            this.handleFailure(response);
        }
    }
})

 

用法:

var root = new Ext.tree.AsyncTreeNode({   
             text: '数据字典', 
             expanded :false,
             draggable:false,   
             id:"1" });
    var loader = new Ext.tree.TreePagingLoader({   
       dataUrl:"cotmodule.do?method=querySysDic&&query=1" ,
       listeners : {   
          'click' : function(loader,node) { 
          	   //alert(node.href);
               this.baseParams.type = node.id; 
            }
       }
   })  ;
	var store = new Ext.tree.TreeLoaderStore({
		rootNode:root,
		loader:loader
	});
	var bbar = new Ext.PagingToolbar({
		pageSize: 15,
	    store: store,
	    displayInfo: true,
	    displayMsg: '显示第 {0} - {1}条记录 共{2}条记录',
	    displaySize:'5|10|15|20|all',
	    emptyMsg: "无记录"
	});
	var myTree = new Ext.tree.TreePanel({      
        region:"center",
        autoScroll:true,   
        animate:true,   
        enableDD:true,   
        containerScroll: true, 
        bbar:bbar,
        root:root,
        loader:loader
    });   
    store.load({params:{start:0,limit:15}});

 

效果图:



 

  • 大小: 32.2 KB
分享到:
评论
7 楼 gtgt1988 2014-03-13  
这样请求不是发送两次了吗,store发送一次请求,treepanel本身load一次发送一次请求
6 楼 achui_1980 2011-04-25  
其他节点也可以分页,不错哦,期待分享~~~
5 楼 changtiger 2011-04-05  
嘿,还真巧了,我最近刚做一个对根用toolbar分页,对其他节点用类似more节点的分页的,过两天整理下,分享给大家。
4 楼 c2002509 2011-03-17  
很给力!
3 楼 achui_1980 2011-03-11  
父节点多的话,也是会有问题,有很多情况下节点是要在一层当中显示,当数据量大的时候,页面加载会很慢,特别是用Ext的时候,这个现象更明显,因此,如果有分页的话,可以很好的解决这个问题。
2 楼 sfeve 2011-03-11  
p_3er 写道
感觉有点过了。将Tree分页,就把Tree的优点砍了一半了。个人认为如果叶节点过多的话,可以给叶节点多分几个父节点。

数据量大的时候有用
1 楼 p_3er 2011-03-09  
感觉有点过了。将Tree分页,就把Tree的优点砍了一半了。个人认为如果叶节点过多的话,可以给叶节点多分几个父节点。

相关推荐

    extjs 树型分页组件

    本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理的是树状结构的数据。在EXTJS中,树型分页通过只加载当前可视区域的节点来...

    extjs4.2 分页combo动态条数 源码

    在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大数据集的情况下,一次性加载所有数据可能导致页面性能下降。因此,引入...

    Extjs入门教程(treePanel和GridPanel)

    在学习过程中,理解ExtJS的MVC(Model-View-Controller)架构至关重要,因为TreePanel和GridPanel都是View部分,它们的数据源(Model)和控制器(Controller)是实现功能的关键。同时,熟悉JSON格式数据的处理也是...

    Extjs2分页树 带查询功能

    5. **加载和渲染**:将树存储与树面板(TreePanel)关联,配置其根节点,然后根据分页和查询结果动态加载和渲染树节点。 6. **异步加载**:为了提高性能,通常会使用异步加载(lazy loading)策略,即仅在需要时...

    Ext分页排序 Ext分页排序

    在ExtJS中,分页和排序可以同时使用,实现高效的数据浏览。当用户在分页数据中进行排序时,排序操作会在当前页内进行(客户端排序),或者重新向服务器发送包含排序和分页信息的请求(服务器端排序)。为了实现这...

    Extjs TreeStore+pagingToolbar 分页

    通过以上步骤,我们可以成功地在ExtJS应用中结合TreeStore和pagingToolbar实现树形数据的分页展示。这不仅提升了用户体验,也优化了应用性能。在实际项目中,可能还需要根据具体需求进行适当的定制和调整,确保分页...

    Extjs chekboxtree PagingTreeLoader 多选、分页

    本篇将深入探讨ExtJS中的"Chekboxtree"(复选框树)与"PagingTreeLoader"(分页树加载器)这两个特性,以及如何结合它们实现多选和分页功能。 "Chekboxtree"是ExtJS中的一种特殊树形组件,它允许用户通过复选框选择...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    在这个示例中,我们关注的是ExtJS中的两个关键组件:GridPanel和TreePanel,以及它们如何与后台数据进行交互,实现分页和复选框联动功能。 1. **GridPanel**:GridPanel是ExtJS中用于展示表格数据的组件,它提供了...

    extjs动态树struts请求数据

    1. **ExtJS动态树(TreePanel)**: ExtJS TreePanel组件是用于显示和操作树形数据的控件。它支持多种特性,如拖放、分页、异步加载等。创建一个动态树,我们需要定义树节点的数据模型(TreeNode),配置数据源...

    extjs实现动态树

    在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持...

    EXTJS动态树的实现举例

    在EXTJS中实现动态树,主要是通过EXTJS的TreePanel组件来完成,下面将详细介绍EXTJS动态树的实现过程及其相关知识点。 1. TreePanel组件: TreePanel是EXTJS中用来展示树形结构数据的组件。它包含节点(Node)、根...

    ExtJs在struts2.0.x下实现动态树的解决方案

    本文将深入探讨如何在Struts2.0.x框架下利用ExtJs库来实现动态树的解决方案。 首先,我们需要了解ExtJs。ExtJs是一个强大的JavaScript库,提供了丰富的组件和布局,用于构建富客户端应用程序。它提供了树形控件...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...

    tree 动态树 extjs ajax

    在ExtJS中,动态树通常通过TreePanel来实现。TreePanel是一个可配置的组件,可以设置各种属性,如节点的样式、展开/折叠行为、拖放功能等。它使用TreeStore来存储和管理数据,而TreeStore可以通过Ajax proxy与服务器...

    extjs 树 搜索

    总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...

    EXTJS动态树支持checkbox 全选

    总结来说,EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现,旨在提供用户友好的多选操作。通过这个功能,开发者可以构建出更加交互性强、功能丰富的Web...

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    ExtJs和Direct Web Remoting (DWR) 是两种在Web应用程序中实现富客户端交互的技术。ExtJs是一个强大的JavaScript框架,用于构建用户界面,而DWR则是一个允许JavaScript直接调用服务器端Java方法的库,无需AJAX的...

Global site tag (gtag.js) - Google Analytics