Extjs之RowNumberer

Ext.grid.RowNumberer,Ext.grid.PageRowNumberer

在一個數據表格中,一般都會加一個行號,在ExtJs中,要實現行號這一效果,只需要一句代碼:

 new Ext.grid.RowNumberer()

舉個例子,代碼如下:

var colModel = new Ext.grid.ColumnModel
                (
                    [
                         new Ext.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){  
            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, {
                    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;
                        }
                    }
                });
                var colModel = new Ext.grid.ColumnModel
                (
                    [
                        // new Ext.grid.RowNumberer(),
                         new Ext.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