EXTJS GRID分页时序号自增的实现-白红宇

EXTJS GRID分页时序号自增的实现

阅读量：4138 次

发布时间：2019-05-25

本文共 1673 字，大约阅读时间需要 5 分钟。

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

先看效果图：

实现步骤如下：

1、定义全局变量。

var record_start = 0;

2、Grid的columns部分的定义。

columns : [

new

Ext.grid.RowNumberer({

header :

序号

width :

renderer:

function

(value,metadata,record,rowIndex){

return

record_start

rowIndex;

}

}), {

header :

项目编号

width :

sortable :

false

dataIndex :

projectNumber

}, {

header :

项目名称

sortable :

false

dataIndex :

psName

}, {

header :

基站名

sortable :

false

dataIndex :

psSiteName

}]

3、Grid 的PagingToolbar部分的定义。

bbar :

new

Ext.PagingToolbar({

store : grid_store,

pageSize :

displayInfo :

true

beforePageText:

第

afterPageText:

/ {0}页

firstText:

首页

prevText:

nextText:

lastText:

尾页

refreshText:

刷新

displayMsg :

当前显示记录从 {0} - {1} 总 {2} 条记录

emptyMsg :

没有相关记录!

doLoad :

function

(start){

record_start

start;

var

{}, 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.PagingToolbar的doLoad方法，PagingToolbar在分页发生变化时会调用这个方法来重新load数据，只是多了个对全局变量进行赋值的步骤，为的就是在分页发生变化时，记录传递给Url的参数start的值。

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

注意：

以上代码使用的是Ext2.x版本，如果你使用的是Ext3.x需要做以下的修改：

doLoad方法中把this.paramNames改为this.getParams()

doLoad :

function

(start){

record_start

start;

var

{}, pn

this

.getParams();