如何获取jqgrid表中的所有分页记录?

时间:2014-07-02 08:18:19

标签: jquery jqgrid pagination

我正在尝试获取分页记录的所有行(所有页面中都有记录)。但是,我只获得第一页中的记录。如何获取表格中的所有记录?有没有办法只使用JavaScript实现这一点? 我正在使用jquery过滤器来获取jqgrid中的过滤记录,因此我需要将过滤后的数据分布在多个页面上。

var x=$("#list").getGridParam("reccount");//get only current page records count.

var gridData = $("#list").jqGrid('getRowData');// get only current page records

$("#list").jqGrid('getGridParam','data');//obtain all records but not filtered records in all     pages

这是我的代码:

$(document).ready(function() {
var grid = $("#list"),
mydata = [
  {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"2",invdate:"2007-10-    02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
grid.jqGrid({
    datatype: "local",
    data: mydata,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
      {name:'id',index:'id', key: true, width:70, sorttype:"int"},
      {name:'invdate',index:'invdate', width:90, sorttype:"date"},
      {name:'name',index:'name', width:100},
      {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
      {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
      {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
      {name:'note',index:'note', width:150, sortable:false}
   ],
   search:true,
   pager:'#pager',
   jsonReader: {cell:""},
   rowNum: 8,
   rowList: [5, 10, 20, 50],
   sortname: 'id',
   sortorder: 'asc',
   viewrecords: true,
   height: "100%",
   caption: "Multiple search with local data"
 });
grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true},
{},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});

});

2 个答案:

答案 0 :(得分:0)

您可以使用jQgrid的loadComplete(){}回调:

loadComplete: function(gridData){
   console.log(gridData); // will print all the records available in the grid.
}

答案 1 :(得分:0)

根据我的理解,您需要没有分页的网格的所有行数据

没有任何可用于直接获取过滤数据的功能。内部JqGrid使用$.jgrid.from过滤本地数据。
要在应用过滤器后使用以下函数获取JqGrid的所有行数据:

var oldFrom = $.jgrid.from,lastSelected;

$.jgrid.from = function (source, initalQuery) 
{
    var result = oldFrom.call(this, source, initalQuery),
    old_select = result.select;
    result.select = function (f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
    };
    return result;
};

lastSelected将在网格元素上应用过滤器后返回所有行数据的数组,这是最后一次排序或过滤操作的结果。
$.jgrid.from是全局的,数据未连接到网格。如果您在页面上有更多的网格,那将会很不舒服。可以使用每个网格的loadComplate代码中的以下行来解决小缺点:

loadComplete: function () {
    this.p.lastSelected = lastSelected;
}

通过上面的代码,我们添加了新的JqGrid参数lastSelected,它将与数据参数类似,但只保留最后一次过滤的数据。

您可以通过以下代码获取过滤器数据:

var filteredData = $grid.jqGrid('getGridParam', 'lastSelected');  

JqGrid Demo (Get all data after filter)