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的大部分时间直接在开始时获取the line jqGrid代码：

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

因为使用true作为第一个参数，然后jQuery制作数据的完整副本并且工作缓慢（为什么？它是另一个纯jQuery问题）。

作为一种解决方法，我建议在创建网格时不设置data参数。在这种情况下，将使用默认参数data: []。而不是那个可以在data回调中设置onInitGrid：

$("#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,{...});，然后直接在data变量中设置p参数

    // 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，效果很快。

更新：我发布到trirand的The pull request已经merged到github上jqGrid的主代码（参见the bug report中的更多内容）。所以jqGrid的下一个版本（版本高达4.6.0）不会有所描述的问题。

Answer 2

尝试按需加载JqGrid，即一次加载较小的数据块而不是所有数据，并在分页时加载剩余的数据。

以下是供参考的示例代码

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

jqGrid需要很长时间才能获得大量记录

2 个答案: