Extjs RowNumberer下一页动态增加

使用RowNumberer,当跳到下一页时,还是从1还是计数。

实现了序号的自动增加。

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});
     }

 

时间: 2024-11-14 12:23:40

Extjs RowNumberer下一页动态增加的相关文章

开机状态下,动态增加与删除SCSI磁盘

开机状态下,SCSI磁盘动态增加与删除命令如下,已经在虚拟机opensuse15.1与物理机centos7.3上测试通过. 删除磁盘命令: echo 1 > /sys/block/sda/device/delete    //sda可以是任何SCSI设备 增加磁盘命令: echo "- - -">/sys/class/scsi_host/host0/scan   //其中host0为磁盘所在的adapter名称 原文地址:https://www.cnblogs.com/lo

WIN 下的超动态菜单(二)用法

WIN 下的超动态菜单(一)简介 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/         auto_dynamenu 是一个动态生成WINDOWS菜单的c++封装库,设计思路是要尽量简化动态菜单的生成代码,在程序界面任何地方想要显示菜单(特别是右键菜单)的时候,可以方便生成菜单,特别可以根据程序当时的内部数据,内部状态来生成不同的动态菜单.         auto_dynamenu 只封装了一个静态的接口函数,这样处理的目的是把类的实现代码可

C#—Dev XtraTabControl动态增加Tab和关闭选项卡方法

C#-Dev XtraTabControl动态增加Tab和关闭选项卡方法,有需要的朋友可以参考下. 记录一下以免以后忘了 添加using DevExpress.XtraTab; 双击listview增加相应的tabpage,禁止重复添加: private void listView_index_MouseDoubleClick(object sender, MouseEventArgs e) { if (listView_index.SelectedItems.Count > 0) { List

【ExtJs】tabPanel标签页与修改标签页的内容

标签页是一个很重要的插件,正如<[mfc]标签页>(点击打开链接)在VC6中的地位,通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页. 一.基本目标 创建如下的标签页,在底部的工具栏有两个按钮,一个可以增加标签页,增加的标签的内容就是当前的时间.这里只作为例子,一般标签页里面的内容,是放个iframe,或者通过无参数传递的ajax直接从别的网页中取,避免在javascript写过多的html代码,别说别人,连你自己都不知道你在写什么了,这个问题在<[Servlet]在S

Hadoop 2.6.3动态增加/删除DataNode节点

假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode中.ssh目录中的authorized_keys和id_rsa 2.复制Hadoop运行目录.hdfs目录及tmp目录至新的DataNode 3.在新DataNode上启动hadoop ..sbin/hadoop-daemon.sh start datanode ..sbin/yarn-daemon

2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)

最近在对之前理解的HTML/CSS/javaScript查漏补缺,真是学会了Jquery马上就开始反感用javascript写很多jquery一下子就可以实现的选择和操作. 今天是做了一个根本无界面美观性可言的实验part,乱七八糟大乱炖,只为练习功能. 动态增加元素 function addBtn() { var textField = document.getElementById("main"); var input = document.createElement("

Yii 1开发日记 -- Ajax实现点击加载下一页

功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 1 /** 2 * 消费记录:列出用户购买章节的记录 3 */ 4 public function actionMyPayHis() 5 { 6 //点击加载更多 7 if( Yii::app()->request->isAjaxRequest ) { 8 //分页 9 $pg = isset( $_GET[ "pg" ] ) ? $_GET[ "pg" ] : 1; 10 $page

jquery 动态增加删除行

最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋值 var length = $("#grid tr").length; //获得当前是第几行,以便追加的时候,在该行下进行新增,我这里跨的级别比较多,根据实际层级去定义 var current = $(obj).parent().parent().parent().prevAll().l

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p: