grid分页序号按顺序自动增加

蒋星雨
2023-12-01

ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯。这里实现了序号的自动增加。

实现步骤如下:

1、定义全局变量。
var record_start = 0;

 

2Gridcolumns部分的定义。
columns
 : [new Ext.grid.RowNumberer({
   header : "序号",
   width : 40,
   renderer:function(value,metadata,record,rowIndex){
    return record_start + 1 + rowIndex;
   }
  }), {
   header : "项目编号",
   width : 50,
   sortable : false,
   dataIndex : "projectNumber"
  }]

 

3Grid PagingToolbar部分的定义。
bbar
 : new Ext.PagingToolbar({
   store : grid_store,
   pageSize : 8,
   displayInfo : true,
   beforePageText:"",
   afterPageText:"/ {0}",
   firstText:"首页",
   prevText:"上一页",
   nextText:"下一页",
   lastText:"尾页",
   refreshText:"刷新",
   displayMsg : "当前显示记录从 {0} - {1} 总 {2} 条记录",
   emptyMsg : "没有相关记录!",
   doLoad : function(start){
    record_start = start;
           var o = {}, pn = this.paramNames;
           o[pn.start] = start;
           o[pn.limit] = this.pageSize;
           this.store.load({params:o});
      }
  })

 

说明:

1、全局变量record_start用于记录列表开始的数据点,如第一页,那么为0,如第二页,那么为8,这里分页pagesize设置为了8

2、分页中doLoad这部分的代码来自于Ext.PagingToolbardoLoad方法,PagingToolbar在分页发生变化时会调用这个方法来重新load数据,只是多了个对全局变量进行赋值的步骤,为的就是在分页发生变化时,记录传递给Url的参数start的值。

3、在columns中实例化Ext.grid.RowNumberer时,重写了renderer方法,其实之所以这样做的原因,大家看一下 Ext.grid.RowNumberer源码中的renderer方法就知道了,就是根据行号+1来设置序号的,这里我们改这个方法,是为了得到行号+分页变化时得到的start参数的值+1 的值,这样就能够正确得到序号结合分页的数据了。

 

 类似资料: