jqGrid花费很长时间处理大型记录

Question

我正在使用jgGrid。它的工作完美，但是当我传递大约90,000条记录并在谷歌浏览器中打开页面时，大约需要8秒来创建一个网格，在我的情况下它应该接近3-4秒。而且当我在IE上运行相同的页面时，它变得没有反应。

任何建议如何减少时间？

我的脚本

function GetCommodityGrid(array) { 
array = array.rows; // assign rows array to array object 
totalRows = array.length; 
    jQuery(document).ready(function() { 
     jQuery("#list").jqGrid({ 
      datatype: 'local', 
      data: array, 
      colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'], 
      colModel: [ 
     { name: 'COM_NAME', index: 'COM_NAME', width: 90, editable: true }, 
     { name: 'COM_CODE', index: 'COM_CODE', width: 100, editable: true }, 
     { name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right", editable: true }, 
     { name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right", editable: true }, 
     { name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right", editable: true }, 
     { name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false, editable: true } 
    ], 

      rowList: [50,100,200], 
      rownumbers: true, // show the numbers on rows 
      loadonce: true, 
      pager: '#pager', 
      sortname: 'COM_NAME', 
      viewrecords: true, // show the total records on the end of the page 
      editurl: "TestGrid/EditRecord", 
      caption: "JSON Example", 

      //new option 

      gridview: true, 
      autoencode: true, 

     }); 


     $("#list").jqGrid("navGrid", "#pager", { add: false }, 
    { //the Edit options 
     closeAfterEdit: true, 
     afterSubmit: function (response) { 
      // you should return from server OK in sucess, any other message on error 
      alert("after Submit"); 
      if (response.responseText == "OKK") { 
       alert("Update is succefully") 
       return [true, "", ""] 
      } 
      else { 
       alert("Update failed") 
       $("#cData").click(); 
       return [false, "", ""] 
      } 
     } 
    }); 



    }); 
} 

Answer 1

我分析装载90,000无序行地方电网的进程，并发现了一个可以轻松克服非常可笑的瓶颈。首先here是快速工作的演示，here几乎是相同的演示，它在IE中的运行非常缓慢。

加载的时间最多的jqGrid直接在beggining得到的jqGrid代码the line：

var p = $.extend(true,{ 
    // there are here different default values of jqGrid parameters 
}, $.jgrid.defaults, pin || {}); 

因为一个使用true作为第一个参数，然后jQuery让数据的完整副本和工程进展缓慢（为什么？这是另一个纯粹的jQuery问题）。

作为解决方法，我建议在创建网格时不要设置参数data。在使用默认参数data: []的情况下。取而代之的是一个可以设置dataonInitGrid回调的内部：

$("#list").jqGrid({ 
    //data: gridData, 
    datatype: "local", 
    .... 
    onInitGrid: function() { 
     // get reference to parameters 
     var p = $(this).jqGrid("getGridParam"); 

     // set data parameter 
     p.data = gridData; 
    } 
}); 

其结果是电网负荷的性能会变得更好。

我会稍后发布我的建议，以便如何对jqGrid的代码进行小的更改以提高jqGrid的性能。我的建议很简单。一是可以节省data参数变量，然后调用var p = $.extend(true,{...});，然后在p变量设置data参数直接

// save local data array in temporary variable and remove from input parameters 
    // to improve performance 
    var localData; 
    if (pin != null && pin.data !== undefined) { 
     localData = pin.data; 
     pin.data = []; 
    } 
    var p = $.extend(true,{ 
     // there are here different default values of jqGrid parameters 
    }, $.jgrid.defaults, pin || {}); 
    if (localData !== undefined) { 
     p.data = localData; 
    } 

The demo使用the fixed code of jqGrid和它的作品很快。

修订：The pull request我张贴到trirand已经merged到的jqGrid的GitHub上的主代码（看多the bug report）。所以下一个版本的jqGrid（版本高于4.6.0）不会有所描述的问题。

Answer 2

试装JqGrid点播，在同一时间，而不是在分页的所有数据和负载剩余的数据数据的加载即较小的块。

这里是参考

PHP示例代码与MySQL

... 
$page = $_GET['page']; // get the requested page 

$limit = $_GET['rows']; // get how many rows we want to have into the grid 

$sidx = $_GET['sidx']; // get index row - i.e. user click to sort 

$sord = $_GET['sord']; // get the direction 

if(!$sidx) $sidx =1; 

// connect to the database  
$db = mysql_connect($dbhost, $dbuser, $dbpassword) 
or die("Connection Error: " . mysql_error());  

mysql_select_db($database) or die("Error conecting to db."); 

$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id"); 

$row = mysql_fetch_array($result,MYSQL_ASSOC); 

$count = $row['count'];  

if($count >0) { 
    $total_pages = ceil($count/$limit); 
} else { 
    $total_pages = 0;  
} 

if ($page > $total_pages) $page=$total_pages; 

$start = $limit*$page - $limit; // do not put $limit*($page - 1) 

if ($start<0) $start = 0; 

$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit"; 

$result = mysql_query($SQL) or die("Couldnt execute query.".mysql_error()); 

$responce->page = $page; 

$responce->total = $total_pages; 

$responce->records = $count; 

$i=0; 

while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 

    $responce->rows[$i]=$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]); 

    $i++; 
} 

echo $json->encode($responce); // coment if php 5 
//echo json_encode($responce); 
...