您的位置:首页 > Web前端 > JavaScript

Extjs之RowNumberer

2015-10-20 20:35 627 查看
Ext.grid.RowNumberer,Ext.grid.PageRowNumberer

在一个数据表格中,一般都会加一个行号,在ExtJs中,要实现行号这一效果,只需要一句代码:

newExt.grid.RowNumberer()


举个例子,代码如下:

varcolModel=newExt.grid.ColumnModel
(
[
newExt.grid.RowNumberer(),
{header:"擦写机器号",width:100,dataIndex:'JSON_no_machine'},
{header:"写入服务器时间",width:150,dataIndex:'JSON_time_insert'},
{header:"现居住地址",width:250,dataIndex:'JSON_xjzdz'},
{header:"服务处所",width:100,dataIndex:'JSON_fwcs'},
{header:"擦写日期",width:150,dataIndex:'JSON_cxrq'},
{header:"擦写单位",width:150,dataIndex:'JSON_cxdwmc'},
{header:"姓名",width:50,dataIndex:'JSON_xm'},
{header:"身份证号码",width:150,dataIndex:'JSON_sfzhm'},
{header:"擦写时间",width:150,dataIndex:'JSON_make_time'},
]
);


但有些时候,我们需要的效果是实际的行号,是翻页之后,行号不会重置为1,而是从在上一页的最后一条记录的行号的基础上继续递增.这个时候,我们需要对Ext.grid.RowNumberer

进行一下扩展:

Ext.grid.PageRowNumberer=Ext.extend(Ext.grid.RowNumberer,{
width:40,
renderer:function(value,cellmeta,record,rowIndex,columnIndex,store){
if(store.lastOptions.params!=null){
varpageindex=store.lastOptions.params.start;
returnpageindex+rowIndex+1;
}else{
returnrowIndex+1;
}
}
});


rowIndex是本页表格的行号,从0开始,pageindex取至每页的Start参数,也是从0开始,那么根据"从在上一页的最后一条记录的行号的基础上继续递增",当前记录的行号就为:

pageindex+rowIndex+1;

举个例子,代码如下:


//实际行号
Ext.grid.PageRowNumberer=Ext.extend(Ext.grid.RowNumberer,{
width:40,
renderer:function(value,cellmeta,record,rowIndex,columnIndex,store){
if(store.lastOptions.params!=null){
varpageindex=store.lastOptions.params.start;
returnpageindex+rowIndex+1;
}else{
returnrowIndex+1;
}
}
});
varcolModel=newExt.grid.ColumnModel
(
[
//newExt.grid.RowNumberer(),
newExt.grid.PageRowNumberer(),
{header:"擦写机器号",width:100,dataIndex:'JSON_no_machine'},
{header:"写入服务器时间",width:150,dataIndex:'JSON_time_insert'},
{header:"现居住地址",width:250,dataIndex:'JSON_xjzdz'},
{header:"服务处所",width:100,dataIndex:'JSON_fwcs'},
{header:"擦写日期",width:150,dataIndex:'JSON_cxrq'},
{header:"擦写单位",width:150,dataIndex:'JSON_cxdwmc'},
{header:"姓名",width:50,dataIndex:'JSON_xm'},
{header:"身份证号码",width:150,dataIndex:'JSON_sfzhm'},
{header:"擦写时间",width:150,dataIndex:'JSON_make_time'},
]
);




NED


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: