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); 
...