• Extjs之RowNumberer


    Ext.grid.RowNumberer,Ext.grid.PageRowNumberer

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

     new Ext.grid.RowNumberer()

    举个例子,代码如下:

    var colModel = new Ext.grid.ColumnModel
                    (
                        [
                             new Ext.grid.RowNumberer(),
                             { header: "擦写机器号",  100, dataIndex: 'JSON_no_machine' },
                             { header: "写入服务器时间",  150, dataIndex: 'JSON_time_insert' },
                             { header: "现居住地址",  250, dataIndex: 'JSON_xjzdz' },
                             { header: "服务处所",  100, dataIndex: 'JSON_fwcs' },
                             { header: "擦写日期",  150, dataIndex: 'JSON_cxrq' },
                             { header: "擦写单位",  150, dataIndex: 'JSON_cxdwmc' },
                             { header: "姓名",  50, dataIndex: 'JSON_xm' },
                             { header: "身份证号码",  150, dataIndex: 'JSON_sfzhm' },
                             { header: "擦写时间",  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){  
                var pageindex=store.lastOptions.params.start;  
                return pageindex + rowIndex + 1;  
            } else {  
                return rowIndex + 1;  
            }  
        }     
    }); 

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

    pageindex + rowIndex + 1;  

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

    NED

     
  • 相关阅读:
    Solution -「ARC 126F」Affine Sort
    Solution -「ABC 219H」Candles
    Solution -「LOCAL」二进制的世界
    Solution Set -「ABC 217」
    Java 封装
    Java 对象和类
    Java 继承
    牛客网MySQL在线编程
    Linux uniq命令
    Linux 单引号、双引号、反引号
  • 原文地址:https://www.cnblogs.com/Francis-YZR/p/4896021.html
Copyright © 2020-2023  润新知