Question

当我进行批量编辑时，在最新版本的free-jqgrid中需要帮助（一次内联编辑100行）。在JQGrid 4.3.1中它真的很快升级到free-jqgrid 4.13.6后，我觉得它很慢。我举了一个类似的例子。这个独立的例子在性能上并不差。但我不确定为什么在我的应用程序中进行内联编辑需要很长时间。任何提示都将是一个很大的帮助。在此示例中，选中多选复选框（位于网格的左上角），然后单击按钮（位于顶部）。基本上试图理解何时进行内联编辑，考虑所有因素。

注意：刚才意识到单行内联编辑也需要2-3秒。这在4.3.1中真的很快。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>http://stackoverflow.com/q/27617764/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="jqGrid/css/ui.jqgrid.css">-->
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint eqeq: true, browser: true, plusplus: true */
        $(function () {
            "use strict";
            var $grid = $("#list"),
                gridData,
                startTime,
                measureTime = false,
                timeInterval;

            var date = new Date(), t = Object.prototype.toString.call(date), t1 = String(date);

            //alert("start to generate the data");
           // gridData = getGridData(100);
       // console.log(gridData);
            //alert("start to fill the grid")
            startTime = new Date();
            $grid.jqGrid({
                datatype: 'json',
        url: 'https://api.myjson.com/bins/efhbt',
        mtype: 'GET',
                colNames: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm'],
        colModel: [
                    { name: "aa", label: "c01" },
                    { name: "bb", label: "c02" },
                    { name: "cc", label: "c03" },
                    { name: "dd", label: "c04" },
                    { name: "ee", label: "c05" },
                    { name: "ff", label: "c06" },
                    { name: "gg", label: "c07", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "hh", label: "c08", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "ii", label: "c09", editable: true, stype: 'select', formatter: 'select',
            edittype: 'select', editoptions: {
                value: 'Select:Select;Y:Yes;N:No',
                multiple: false
            }
            },
                    { name: "jj", label: "c10", editable: true },
                    { name: "kk", label: "c11", editable: true },
                    { name: "ll", label: "c12", editable: true },
                    { name: "mm", label: "c13", editable: true }
                ],
                cmTemplate: { width: 100, autoResizable: true },
                rowNum: 1000,
        records: 1000,
                rownumWidth: 40,
                rowList: [20, 100, 1000, 10000, "100000:All"],
                viewrecords: true,
                rownumbers: true,
                toppager: false,
                pager: false,
                shrinkToFit: false,
        multiselect: true,
        editurl: 'clientArray',
        loadonce: true,
                onSortCol: function () {
                    startTime = new Date();
                    measureTime = true;
                },
        /*onSelectRow: function (rowid) {
                    var $self = $(this),
                        savedRow = $self.jqGrid("getGridParam", "savedRow");
                    if (savedRow.length > 0) {
                        $self.jqGrid("restoreRow", savedRow[0].id);
                    }
                    $self.jqGrid("editRow", rowid);
                },*/
                loadComplete: function () {
                    if (measureTime) {
                        setTimeout(function () {
                            alert("Total loading time: " + timeInterval + "ms");
                        }, 50);
                        measureTime = false;
                    }
                },
                autoencode: true,
                caption: "Shows the performance of resizing. Make double-click on the column resizer"
             }).jqGrid("filterToolbar", {
                    beforeSearch: function () {
                        startTime = new Date();
                        measureTime = true;
                        return false; // allow filtering
                    }
             }).jqGrid("gridResize");

             timeInterval = new Date() - startTime;
             setTimeout(function () {
                // alert("Total time: " + timeInterval + "ms");
             }, 50);




         // On Click Of Button
         $( "#Change_Value" ).click(function() {
        var v = $("#name").val();
        var myGrid = $("#list");
        var selRowIds = myGrid.jqGrid("getGridParam", "selarrrow");
        //alert(selRowId.length);
        for (var i = 0; i < selRowIds.length; i++) {
            //rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]);
            // one can uses the data here
            myGrid.jqGrid("editRow", selRowIds[i], true);
        }
        });


        });
    //]]>
    </script>
</head>
<body>
    <div>
    <input type="text" name="name" id="name" />
    <input type="button" name="Change_Value" id="Change_Value" value="Change Value" /> 
    </div>
    <div>
    <table id="list"></table>

    </div>
</body>
</html>

Answer 1

“批量编辑”（一次100行的内联编辑）通常很糟糕，因为它会在页面上产生大量更改，并且一个元素的每次更改都会跟随网络浏览器reflow所有现有元素。此外，显示100行的网格，其中只有大约25个对用户可见（由于显示器的自然限制），另外还会降低性能。

比较the initial demo与another one的效果，其中我刚刚在“大量修改”之前调用jQuery.hide，在“大量编辑”之后调用jQuery.show：

myGrid.hide(); // !!! new line
for (var i = 0; i < selRowIds.length; i++) {
    myGrid.jqGrid("editRow", selRowIds[i], true);
}
myGrid.show(); // !!! new line

如果要使用25行的本地分页，例如the next demo，则会增加页面的性能。在我的测试中开始编辑100行的初始演示大约1065毫秒，编辑以前隐藏网格的演示需要330毫秒，编辑25行（本地分页）需要90毫秒。

更新：如果您在网格中使用冻结列，那么您应该在循环之前调用destroyFrozenColumns来销毁冻结列，在此处调用editRow，然后重新创建setFrozenColumns的新调用冻结的列。它还应该提高性能。

free-jqgrid中的批量编辑性能

1 个答案: