使用简单的配置就可以实现 store, columns, selModel , pagingToolbar ,
最重要的一点是实现分页时可以保持前一页的选中状态,
但是要遵守其中的一些规定,至于哪些规定呢,看下面的代码就知道啦!
代码如下:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ext.namespace('Ext.ux.grid');
-
- Ext.ux.grid.CollectGrid = Ext.extend(Ext.grid.GridPanel,{
-
-
-
-
-
-
- keepSelectedOnPaging: false,
-
-
-
-
-
- recordIds:new Array(),
-
-
-
-
-
- idColName:'',
-
-
-
-
-
- url: '',
-
-
-
-
-
-
- rowNumber : true,
-
-
-
-
-
-
- checkBox: true,
-
-
-
-
-
-
-
-
-
-
- CM_JR_Record: null,
-
-
-
-
-
-
- pagingBar: true,
-
-
-
-
-
-
-
-
- pagingConfig:{
- pageSize: 20,
-
- displayInfo: true,
- displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',
- emptyMsg: '<b>0</b> 条记录'
- },
-
- viewConfig:{
- forceFit: true
- },
-
-
- initComponent: function(){
- if(this.CM_JR_Record){
- this.init_SM_CM_DS();
- }
- if(this.pagingBar){
- this.init_PagingBar();
- }
- if(this.keepSelectedOnPaging){
- this.init_OnPaging();
- }
- Ext.ux.grid.CollectGrid.superclass.initComponent.call(this);
- },
-
-
-
-
-
-
- init_SM_CM_DS: function(){
- var gCm = new Array();
- var gRecord = new Array();
-
- if(this.rowNumber){
- gCm[gCm.length]=new Ext.grid.RowNumberer();
- }
- if(this.checkBox){
- var sm = new Ext.grid.CheckboxSelectionModel();
- gCm[gCm.length] = sm;
- this.selModel = sm;
- }
-
- for(var i=0;i<this.CM_JR_Record.length;i++)
- {
- var g = this.CM_JR_Record[i];
- if(g.visiable || g.visiable=='undefined' || g.visiable==null){
- gCm[gCm.length] = g;
- }
-
- gRecord[gRecord.length]={
- name: g.dataIndex,
- type: g.type || 'string'
- }
- }
-
-
- this.cm = new Ext.grid.ColumnModel(gCm);
- this.cm.defaultSortable = true;
-
-
- this.store = new Ext.data.Store({
-
- proxy: new Ext.data.HttpProxy({
- url: this.url,
- method: 'post'
- }),
- reader:new Ext.data.JsonReader({
- totalProperty: 'totalProperty',
- root: 'root'
- },
- Ext.data.Record.create(gRecord)
- )
-
- });
-
-
- this.pagingConfig.store = this.store;
-
- if(this.pagingBar){
- this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
- }else{
- this.store.load();
- }
-
- },
-
-
-
-
- init_PagingBar: function(){
- var bbar = new Ext.PagingToolbar(this.pagingConfig);
- this.bbar = bbar;
- },
-
- init_OnPaging: function(){
-
- this.idColName = this.CM_JR_Record[0].dataIndex ;
-
- this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){
-
-
- for(var i=0;i<this.recordIds.length;i++)
- {
- if(rec.data[this.idColName] == this.recordIds[i]){
- this.recordIds.splice(i,1);
- return;
- }
- }
-
-
- },this);
-
- this.selModel.on('rowselect',function(selMdl,rowIndex,rec){
- if(this.hasElement(this.recordIds)){
- for(var i=0;i<this.recordIds.length;i++){
- if(rec.data[this.idColName] == this.recordIds[i]){
- return;
- }
- }
- }
-
- this.recordIds.unshift(rec.data[this.idColName]);
-
- },this);
-
- this.store.on('load',function(st,recs){
- if(this.hasElement(this.recordIds)){
- st.each(function(rec){
- Ext.each(this.recordIds,function(item,index,allItems){
- if(rec.data[this.idColName] == item){
- this.selModel.selectRecords([rec],true);
- return false;
- }
- },this);
- },this);
- }
- },this);
-
- },
-
- hasElement : function(recIds){
- if(recIds.length > 0)
- return true;
- else
- return false;
- }
-
- }
- )
分享到:
相关推荐
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的...
扩展的GridPanel,让其分页后保持选择状态
Ext.grid.GridPanel 是一个功能强大且广泛使用的Grid控件,但是它存在一个很大的缺陷:单元格的内容不能选中,没法选中就没法复制,这给用户带来了很多不便。这个问题的根源在于ExtJs输出的代码中,每个单元格的div...
在EXTJS框架中,Gridpanel是用于展示数据的常用组件,它提供了丰富的功能,如排序、分页、筛选等。当我们需要对数据进行更复杂的展示,例如按类别或层级分类时,多表头(Multi-Level Headers)就显得尤为重要。标题...
Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...
ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是ExtJS中一个非常有用的特性,允许我们在GridPanel的每一行中添加一个可展开的区域,展示更多的详细信息...
分页功能可以通过配置`pagingToolbar`实现,它提供了一种用户友好的界面来控制数据的显示页数。以下是一个基本的配置示例: ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.DWRProxy('...
每一项都是一个`Ext.grid.Column`实例。 - 示例:`columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年龄', dataIndex: 'age' }]` 3. **autoExpandColumn** - 说明:此配置项指定了一个列ID,该列会...
GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,GridPanel通常与Store结合使用,Store负责管理数据,而GridPanel则负责显示这些数据。 ...
因此,掌握如何在ExtJs Grid中实现多选功能以及如何获取已选中的所有值是非常重要的。 #### 二、实现多选功能 在ExtJs中,实现Grid的多选功能主要通过`CheckboxSelectionModel`来完成。下面将详细介绍如何设置并...
在这个扩展中,TreeLoaderStore可能是结合了TreeLoader和Store概念的一个自定义类,它不仅管理树的数据,还提供了分页的功能。可能包含以下关键部分: 1. 数据接口:定义如何与服务器通信,获取分页数据。 2. 分页...
在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
导出过程包括:创建一个CSV字符串,或者构建一个Excel工作簿模型,然后提供下载链接供用户保存。 表格排序功能是另一个常见的需求。Extremecomponents的GridPanel支持列头点击进行排序,这得益于ColumnModel的配置...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是那些基于Web的桌面级应用。GridPanel 是 ExtJS 中的核心组件之一,它提供了一种高效、可定制的方式来展示大量结构化数据。在这个主题中,我们...
总之,ExtJS是一个功能强大的JavaScript框架,特别适合于构建复杂的、具有桌面应用级别的Web应用。GridPanel作为其代表性组件,能够灵活地展示和处理数据,是数据密集型应用的理想选择。通过深入理解和掌握ExtJS,...
Ext.NET 是一个基于.NET Framework的JavaScript库,它提供了一种高效的方式来构建富互联网应用程序(RIA)。GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入...