Extjs之RowNumberer
2015-10-20 20:35
627 查看
Ext.grid.RowNumberer,Ext.grid.PageRowNumberer
在一个数据表格中,一般都会加一个行号,在ExtJs中,要实现行号这一效果,只需要一句代码:
举个例子,代码如下:
但有些时候,我们需要的效果是实际的行号,是翻页之后,行号不会重置为1,而是从在上一页的最后一条记录的行号的基础上继续递增.这个时候,我们需要对Ext.grid.RowNumberer
进行一下扩展:
rowIndex是本页表格的行号,从0开始,pageindex取至每页的Start参数,也是从0开始,那么根据"从在上一页的最后一条记录的行号的基础上继续递增",当前记录的行号就为:
NED
在一个数据表格中,一般都会加一个行号,在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
相关文章推荐
- JS事件
- js的基础类型与引用类型
- [Servlet]Servlet/JSP Web应用配置
- Javascript和HTML dom
- 杂六笔记
- C# web api返回类型设置为json的两种方法
- 利用javascript让导航栏响应伸缩
- 正则表达式文件路径验证js版
- 杂记--泛型与json解析(fastjson)
- WebApi传递JSON参数
- 轻松学习JavaScript一:为什么学习JavaScript
- seajs开篇:我为什么学习seajs,因为它的"预先下载,延迟执行"特性
- javascript函数命名的三种方式及区别
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
- EaselJS简明教程2-动画
- EaselJS简明教程1-绘图
- 如何理解javascript closure ?
- Jsoup解析Html教程
- Xpages实现流程控制展示
- JS中的prototype的含义