jqgrid加载没有分页的大型数据集

Question

我想知道是否有更好的方法从服务器加载大型Json数据集。

我使用jqgrid作为loadonce：true。我需要一次加载大约1500条记录，而且我也不使用分页选项。有没有更好的方法来实现这一目标？先谢谢你。

这是我的网格码 -

$(function(){ 
     $("#testgrid").jqGrid({ 
      url:getGridUrl, 
      datatype: 'json', 
      mtype: 'GET', 
      height: 250, 
      colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
      colModel:[ 
       {name:'id',index:'id', width:60, sorttype:"int",search:false}, 
       {name:'invdate',index:'invdate', width:90, sorttype:"date",search:false}, 
       {name:'name',index:'name', width:100,search:false}, 
       {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
       {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",search:false},   
       {name:'total',index:'total', width:80,align:"right",sorttype:"float",search:false},  
       {name:'note',index:'note', width:150, sortable:false,search:false}  
      ], 
      multiselect: true, 
      multiboxonly:true, 
      caption: "Manipulating Array Data", 
      pager: '#testgridpager', 
      //Auto load while scrolling 
      //scroll: true, 
      //to hide pager buttons 
      pgbuttons:false, 
      recordtext:'', 
      pgtext:'', 
      loadonce: true, 
      sortname: 'id', 
      sortorder: 'asc', 
      viewrecords: true, 
      multiselect: true, 

      jsonReader : { 
       root: "rows", 
       //page: "page", 
       //total: "total", 
       records: "records", 
       repeatitems: false, 
       cell: "cell", 
       id: "id" 
      }, 
      loadComplete: function(data) { 
      var rowId; 
      //alert(data.length); 
      //alert('load complete'+data.rows.length); 
      //set checkboxes false if mode is set to true 
      if(mode){ 
       for(var i=0;i<data.rows.length;i++){ 
        rowId=data.rows[i].id; 
        disableRow(rowId); 
        var searchVal = $("#gs_amount").val().trim(); 
        if(searchVal ==data.rows[i].amount){ 
         jQuery("#testgrid").jqGrid('setSelection',rowId); 
         //heighlightSearch(); 
        } 
       } 
      } 
     } 
    }); 
     //toolbar search 
     $("#testgrid").jqGrid('filterToolbar',{stringResult:true,searchOnEnter:false}); 
    }); 

    function disableRow(rowId){ 
    $("#testgrid").jqGrid('setRowData', rowId, false, {color:'gray'}); 
    var trElement = jQuery("#"+ rowId,$('#testgrid')); 
    trElement.removeClass("ui-state-hover"); 
    trElement.addClass('ui-state-disabled'); 
    trElement.attr("disabled",true); 
} 

Answer 1

以this demo为例，在使用gridview: true的情况下，您可以看到为网格加载1500行的时间。

您示例中最具性能问题的是loadComplete函数。如果您确实需要对网格进行一些修改，则应该使用jQuery来操作网格包含。表现最好的，如果你在例子中使用电网的DOM元素一样，直接

loadComplete: function() { 
    var i=0, indexes = this.p._index, localdata = this.p.data, 
     rows=this.rows, rowsCount = rows.length, row, rowid, rowData, className; 

    for(;i<rowsCount;i++) { 
     row = rows[i]; 
     className = row.className; 
     //if ($(row).hasClass('jqgrow')) { // test for standard row 
     if (className.indexOf('jqgrow') !== -1) { 
      rowid = row.id; 
      rowData = localdata[indexes[rowid]]; 
      if (rowData.amount !== "200") { 
       // if (!$(row).hasClass('ui-state-disabled')) { 
       if (className.indexOf('ui-state-disabled') === -1) { 
        row.className = className + ' ui-state-disabled'; 
       } 
       //$(row).addClass('ui-state-disabled'); 
      } 
     } 
    } 
} 

您可以看到相应的例子生活here可以存档。

在loadComplete功能我使用的事实的实现中，具有可被用来访问loadonce:true参数使用内部参数_index和data的jqGrid的包含网格的。在示例中，我禁用了amount列中不包含“200”的行。

修订：The answer介绍如何使用rowattr回调简化的解决方案，并拥有最佳的性能（在事业gridview: true情况下）。

Answer 2

我会受到诱惑寻找到自动加载上的jqGrid的滚动功能。我不会预先加载1500行。任何原因你不能页面？