• 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});
         }
  • 相关阅读:
    Java自学
    Java自学
    Java自学
    java自学
    Java自学
    mybatis基础及原理
    自定义swagger maven codegen插件
    spring学习总结016 --- spring事务原理
    spring学习总结015 --- spring事务
    windows解决端口占用问题
  • 原文地址:https://www.cnblogs.com/exmyth/p/3011650.html
Copyright © 2020-2023  润新知