`

ExtJs Grid分页时序号自增的实现

 
阅读更多

ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯。这里实现了序号的自动增加。
先看效果图:
实现步骤如下:
1、定义全局变量。
var record_start = 0;
2、Grid的columns部分的定义。

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"
}, {
header : "项目名称",
sortable : false,
dataIndex : "psName"
}, {
header : "基站名",
sortable : false,
dataIndex : "psSiteName"
}]

3、Grid 的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.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 o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
this.store.load({params:o});
}

分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    Extjs grid分页1

    在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的JavaScript组件,用于在Web应用中创建数据网格。它支持各种特性,如排序、过滤、分组、分页等。分页功能特别适用于处理...

    Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...

    extjs 分页

    二、EXTJS分页实现 1. 配置Store:首先,我们需要在Store中配置分页参数,如设置每页记录数`pageSize`,开启分页`paging`,并指定分页模型`pagingModel`为`client`(客户端分页)或`server`(服务器端分页)。 2. ...

    extjs 简单分页例子

    EXTJS是一种基于JavaScript的前端框架,它提供...这是一个基本的EXTJS分页实现,实际应用中可能还需要考虑错误处理、数据过滤、排序等功能。通过这种方式,EXTJS能够帮助开发者高效地构建功能丰富的数据驱动的Web应用。

    extjs 树型分页组件

    本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理的是树状结构的数据。在EXTJS中,树型分页通过只加载当前可视区域的节点来...

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    在开发基于Extjs的应用程序时,分页是一项常用且重要的功能。然而,在实际应用过程中可能会遇到一些问题,比如当用户点击“下一页”时,原有的查询条件未能正确传递到后端,导致返回的数据与预期不符。本文将详细...

    extjs4.2 分页combo动态条数 源码

    分页组件在EXTJS中通常由PagingToolbar提供,这是一个放置在Grid或TreePanel底部的工具栏,包含了导航按钮和页码显示。在Combobox中实现分页,我们需要自定义Combobox的行为,使其能够与PagingToolbar协同工作。 `...

    ExtJs grid多选时获取选中的所有值

    因此,掌握如何在ExtJs Grid中实现多选功能以及如何获取已选中的所有值是非常重要的。 #### 二、实现多选功能 在ExtJs中,实现Grid的多选功能主要通过`CheckboxSelectionModel`来完成。下面将详细介绍如何设置并...

    ExtJs+Dwr(Grid)实现分页功能

    ExtJs+Dwr(Grid)实现分页功能,很实用

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

    动画效果的grid分页

    在ExtJS框架中,我们可以实现具有动画效果的grid分页,提升用户交互的流畅性和视觉吸引力。 首先,让我们了解一下ExtJS。ExtJS是一个流行的JavaScript库,提供了丰富的组件和工具,用于构建复杂的、功能强大的Web...

    Extjs4 Grid分页与自动刷新

    ### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    extjs grid

    4. **分页**:Grid可以通过`pagingToolbar`组件实现分页,方便浏览大量数据。分页配置包括`pageSize`、`store`和`displayInfo`等。 5. **排序**:EXTJS Grid支持单列或多列排序,只需点击列头即可改变排序顺序。...

    extjs grid数据导出excel文件

    具体实现时,开发者可能会在EXTJS的事件处理器中添加导出功能,例如在Grid的工具栏上添加一个“导出”按钮,当点击该按钮时触发数据导出的函数。这个函数会按照上述步骤操作,最终生成一个可供下载的Excel文件。 在...

Global site tag (gtag.js) - Google Analytics