`
ssxxjjii
  • 浏览: 950957 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

扩展GridPanel,附带分页选中状态,实现快速构建一个功能齐全的Grid

    博客分类:
  • EXT
 
阅读更多

使用简单的配置就可以实现 store, columns, selModel , pagingToolbar , 

最重要的一点是实现分页时可以保持前一页的选中状态, 
 但是要遵守其中的一些规定,至于哪些规定呢,看下面的代码就知道啦! 
 代码如下: 
Java代码  收藏代码
  1. /* 
  2.  * @class Ext.ux.grid.CollectGrid 
  3.  * @version: 1.0 
  4.  * @author: chengbao_zhu 
  5.  * 
  6.  * Example : Ext.onReady(function(){     
  7.               var CM_JR_Record = [ 
  8.               { 
  9.                  dataIndex:"", //the ColumnModel options alse the JsonReader mapping (required) 
  10.                  header:"",    //the ColumnModel options (required)  
  11.                  visiable: false, //my expands option to show the header or not (options) 
  12.                  type: date,   //the type of this data (options) 
  13.                  ...another options of ColumnModel 
  14.               },{    
  15.                  dataIndex : '',    
  16.                  header : "",    
  17.                  width : 130    
  18.               }];  
  19.               
  20.               var myGrid = new Ext.ux.grid.CollectGrid({ 
  21.                   url : 'MyJsp.jsp',          // the store load url (required) 
  22.                   CM_JR_Record: CM_JR_Record, //.....(required) 
  23.                   rowNumber:true,             //true to add a Ext.grid.RowNumberer,defalut(true) 
  24.                   checkBox:true,              //true to add a Ext.grid.CheckBoxSelectionModel,default(true) 
  25.                   pagingBar:true,             //true to add a Ext.PagingToolBar,default(true) 
  26.                   pagingConfig:objcet,        //config pagingToolBar if pagingBar is true 
  27.                   keepSelectedOnPaging: true, //true to FireEvent when you paging to keep the state of record selected 
  28.                   recordIds : new Array() ,   // store seleced ids when keepSelectedOnPaging is true 
  29.                   idColName :'stat_id',       //the id column name 
  30.                    
  31.                   ...another 
  32.                   width : 700,  
  33.                   height: 600,  
  34.                    
  35.                   title : 'This is My Grid'  , 
  36.                   renderTo: 'my_grid' 
  37.               }); 
  38.                
  39.               myGrid.store.load({params:{start:0,limit:myGrid.pagingConfig.pageSize}}); 
  40.               //myUxGrid.render(); 
  41.               myGrid.on('rowclick',function(grid,rowIndex,e){ 
  42.                 alert(grid.getStore().getAt(rowIndex).data['stat_id']); 
  43.               } 
  44.               ); 
  45.          } 
  46.          ); 
  47.  */  
  48.   
  49.    
  50. Ext.namespace('Ext.ux.grid');  
  51.   
  52. Ext.ux.grid.CollectGrid = Ext.extend(Ext.grid.GridPanel,{  
  53.       
  54.     /* 
  55.      * true to keep the records selected when you paging 
  56.      * @default(false) 
  57.      * @type: boolean 
  58.      */  
  59.     keepSelectedOnPaging: false,  
  60.       
  61.     /* 
  62.      * the array to store the record id 
  63.      * @type: array 
  64.      */  
  65.     recordIds:new Array(),  
  66.       
  67.     /* 
  68.      * set your id Column Name 
  69.      * @default : this.CM_JR_Record[0].dataIndex 
  70.      */  
  71.     idColName:'',  
  72.       
  73.     /* 
  74.      * set this.store.load url; 
  75.      * @type: string 
  76.      */  
  77.     url: '',  
  78.       
  79.     /* 
  80.      * show the rowNumber or not 
  81.      * @type: boolean 
  82.      * @default: true 
  83.      */  
  84.     rowNumber : true,  
  85.       
  86.     /* 
  87.      * set the grid sm,if checkBoxSelection=true,sm=CheckBoxSelectionModel 
  88.      * else sm=RowSelectionModel,default to true; 
  89.      * @type: boolean 
  90.      */  
  91.     checkBox: true,  
  92.       
  93.     /* 
  94.      * set the grid cm array; 
  95.      * set the JsonReader record; 
  96.      *  
  97.      * format: [{name:'',header:'',visiable:'',...another cm options},{}], 
  98.      * @name=dataIndex 
  99.      * @visiable: set this record to the cm(grid header) default(true) 
  100.      * @type: array (records) 
  101.      */   
  102.     CM_JR_Record: null,  
  103.       
  104.     /* 
  105.      * true to add a bottom paging bar 
  106.      * @defalut: true 
  107.      * @type: boolean 
  108.      */  
  109.     pagingBar: true,  
  110.       
  111.     /* 
  112.      * config paging bar if pagingBar set true 
  113.      * @type: object 
  114.      * @default: {pageSize: 20,store: this.store,displayInfo: true, 
  115.      *            displayMsg: '当前记录数: {0} - {1} 总记录数: {2}', 
  116.      *            emptyMsg: '<b>0</b> 条记录'} 
  117.      */  
  118.     pagingConfig:{  
  119.         pageSize: 20,  
  120.         //store: this.store,  
  121.         displayInfo: true,  
  122.         displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',  
  123.         emptyMsg: '<b>0</b> 条记录'  
  124.     },  
  125.       
  126.     viewConfig:{  
  127.         forceFit: true  
  128.     },  
  129.       
  130.     //private  
  131.     initComponent: function(){  
  132.         if(this.CM_JR_Record){  
  133.             this.init_SM_CM_DS();  
  134.         }  
  135.         if(this.pagingBar){  
  136.             this.init_PagingBar();  
  137.         }  
  138.         if(this.keepSelectedOnPaging){  
  139.             this.init_OnPaging();  
  140.         }  
  141.         Ext.ux.grid.CollectGrid.superclass.initComponent.call(this);  
  142.     },  
  143.       
  144.     /* 
  145.      * init the grid use the config options 
  146.      * @return: void 
  147.      * @params: none 
  148.      */  
  149.     init_SM_CM_DS: function(){  
  150.         var gCm = new Array();  
  151.         var gRecord = new Array();  
  152.           
  153.         if(this.rowNumber){  
  154.             gCm[gCm.length]=new Ext.grid.RowNumberer();  
  155.         }  
  156.         if(this.checkBox){  
  157.             var sm = new Ext.grid.CheckboxSelectionModel();  
  158.             gCm[gCm.length] = sm;  
  159.             this.selModel = sm;  
  160.         }  
  161.           
  162.         for(var i=0;i<this.CM_JR_Record.length;i++)  
  163.         {  
  164.             var g = this.CM_JR_Record[i];  
  165.             if(g.visiable || g.visiable=='undefined' || g.visiable==null){  
  166.                 gCm[gCm.length] = g;  
  167.             }  
  168.               
  169.             gRecord[gRecord.length]={  
  170.                 name: g.dataIndex,  
  171.                 type: g.type || 'string'   
  172.             }  
  173.         }  
  174.       
  175.         //create grid columnModel  
  176.         this.cm = new Ext.grid.ColumnModel(gCm);  
  177.         this.cm.defaultSortable = true;  
  178.           
  179.         //create a jsonStore  
  180.         this.store = new Ext.data.Store({  
  181.           
  182.             proxy: new Ext.data.HttpProxy({  
  183.                 url: this.url,  
  184.                 method: 'post'  
  185.             }),  
  186.             reader:new Ext.data.JsonReader({  
  187.                 totalProperty: 'totalProperty',  
  188.                 root: 'root'  
  189.             },  
  190.             Ext.data.Record.create(gRecord)  
  191.             )  
  192.           
  193.         });  
  194.           
  195.           
  196.         this.pagingConfig.store = this.store;  
  197.           
  198.         if(this.pagingBar){  
  199.             this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});  
  200.         }else{  
  201.             this.store.load();  
  202.         }  
  203.           
  204.     },  
  205.       
  206.     /* 
  207.      * 创建并初始化paging bar 
  208.      */  
  209.     init_PagingBar: function(){  
  210.         var bbar = new Ext.PagingToolbar(this.pagingConfig);  
  211.         this.bbar = bbar;  
  212.     },  
  213.       
  214.     init_OnPaging: function(){  
  215.           
  216.         this.idColName = this.CM_JR_Record[0].dataIndex ;//默认第一列为ID列  
  217.           
  218.         this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){  
  219.           
  220.               
  221.                 for(var i=0;i<this.recordIds.length;i++)  
  222.                 {  
  223.                     if(rec.data[this.idColName] == this.recordIds[i]){  
  224.                         this.recordIds.splice(i,1);                       
  225.                         return;  
  226.                     }  
  227.                 }  
  228.               
  229.                
  230.        },this);  
  231.          
  232.        this.selModel.on('rowselect',function(selMdl,rowIndex,rec){  
  233.             if(this.hasElement(this.recordIds)){  
  234.                 for(var i=0;i<this.recordIds.length;i++){  
  235.                     if(rec.data[this.idColName] == this.recordIds[i]){  
  236.                         return;  
  237.                     }  
  238.                 }  
  239.             }     
  240.               
  241.             this.recordIds.unshift(rec.data[this.idColName]);  
  242.               
  243.        },this);  
  244.          
  245.        this.store.on('load',function(st,recs){  
  246.             if(this.hasElement(this.recordIds)){  
  247.                 st.each(function(rec){  
  248.                     Ext.each(this.recordIds,function(item,index,allItems){  
  249.                         if(rec.data[this.idColName] == item){  
  250.                             this.selModel.selectRecords([rec],true);                          
  251.                             return false;  
  252.                         }  
  253.                     },this);  
  254.                 },this);      
  255.             }     
  256.        },this);  
  257.                
  258.     },  
  259.       
  260.     hasElement : function(recIds){  
  261.         if(recIds.length > 0)  
  262.             return true;  
  263.         else  
  264.             return false;  
  265.     }  
  266.       
  267. }  
  268. )  

分享到:
评论

相关推荐

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    Ext3.2的TreePanel和GridPanel的分页与Hibernate的分页功能的影射

    在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的...

    扩展GridPanel

    扩展的GridPanel,让其分页后保持选择状态

    GridPanel中的单元格不能选中复制的解决方法

    Ext.grid.GridPanel 是一个功能强大且广泛使用的Grid控件,但是它存在一个很大的缺陷:单元格的内容不能选中,没法选中就没法复制,这给用户带来了很多不便。这个问题的根源在于ExtJs输出的代码中,每个单元格的div...

    Gridpanel多表头的扩展

    在EXTJS框架中,Gridpanel是用于展示数据的常用组件,它提供了丰富的功能,如排序、分页、筛选等。当我们需要对数据进行更复杂的展示,例如按类别或层级分类时,多表头(Multi-Level Headers)就显得尤为重要。标题...

    Ext GridPanel 中实现加链接操作

    Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是ExtJS中一个非常有用的特性,允许我们在GridPanel的每一行中添加一个可展开的区域,展示更多的详细信息...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    分页功能可以通过配置`pagingToolbar`实现,它提供了一种用户友好的界面来控制数据的显示页数。以下是一个基本的配置示例: ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.DWRProxy('...

    Ext.grid.GridPanel属性祥解

    每一项都是一个`Ext.grid.Column`实例。 - 示例:`columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年龄', dataIndex: 'age' }]` 3. **autoExpandColumn** - 说明:此配置项指定了一个列ID,该列会...

    EXTJSEXT实例GridPanel.

    GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,GridPanel通常与Store结合使用,Store负责管理数据,而GridPanel则负责显示这些数据。 ...

    ExtJs grid多选时获取选中的所有值

    因此,掌握如何在ExtJs Grid中实现多选功能以及如何获取已选中的所有值是非常重要的。 #### 二、实现多选功能 在ExtJs中,实现Grid的多选功能主要通过`CheckboxSelectionModel`来完成。下面将详细介绍如何设置并...

    Extjs树分页组件扩展

    在这个扩展中,TreeLoaderStore可能是结合了TreeLoader和Store概念的一个自定义类,它不仅管理树的数据,还提供了分页的功能。可能包含以下关键部分: 1. 数据接口:定义如何与服务器通信,获取分页数据。 2. 分页...

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

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

    使用extremecomponent组件实现分页、导出xls

    导出过程包括:创建一个CSV字符串,或者构建一个Excel工作簿模型,然后提供下载链接供用户保存。 表格排序功能是另一个常见的需求。Extremecomponents的GridPanel支持列头点击进行排序,这得益于ColumnModel的配置...

    Extjs中的GridPanel

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是那些基于Web的桌面级应用。GridPanel 是 ExtJS 中的核心组件之一,它提供了一种高效、可定制的方式来展示大量结构化数据。在这个主题中,我们...

    ExtJS介绍以及GridPanel

    总之,ExtJS是一个功能强大的JavaScript框架,特别适合于构建复杂的、具有桌面应用级别的Web应用。GridPanel作为其代表性组件,能够灵活地展示和处理数据,是数据密集型应用的理想选择。通过深入理解和掌握ExtJS,...

    ext.net 动态创建gridpanel

    Ext.NET 是一个基于.NET Framework的JavaScript库,它提供了一种高效的方式来构建富互联网应用程序(RIA)。GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入...

Global site tag (gtag.js) - Google Analytics