free-jqgrid 中的批量编辑性能
Mass edit performance in free-jqgrid
当我进行批量编辑（一次内联编辑 100 行）时需要最新版本的 free-jqgrid 的帮助。在升级到 free-jqgrid 4.13.6 后，JQGrid 4.3.1 真的很快，我发现它很慢。我创建了一个类似的例子。这个独立的例子在性能上还不错。但我不确定为什么在我的应用程序中进行内联编辑需要很长时间。任何提示都会有很大的帮助。
在此示例中，选中多选复选框（位于网格的左上角），然后单击按钮（位于顶部）。基本上试图了解在进行内联编辑时考虑了所有因素。
注意：刚才发现单行内联编辑也需要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>
<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>
"mass editing"（一次内联编辑 100 行）一般来说不好，因为它会在页面上产生很多变化，每个元素的变化都遵循网络浏览器 reflow 对于所有现有元素 。此外，显示 100 行的网格，其中只有大约 25 行对用户可见（由于显示器的自然限制），另外降低了性能。
比较 the initial demo with another one 的性能，我只是在 "mass editing" 之前包括了 jQuery.hide 的调用，在 "mass editing" 之后包括了 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 的新调用重新创建冻结的列。它应该会额外提高性能。
当我进行批量编辑（一次内联编辑 100 行）时需要最新版本的 free-jqgrid 的帮助。在升级到 free-jqgrid 4.13.6 后，JQGrid 4.3.1 真的很快，我发现它很慢。我创建了一个类似的例子。这个独立的例子在性能上还不错。但我不确定为什么在我的应用程序中进行内联编辑需要很长时间。任何提示都会有很大的帮助。 在此示例中，选中多选复选框（位于网格的左上角），然后单击按钮（位于顶部）。基本上试图了解在进行内联编辑时考虑了所有因素。
注意：刚才发现单行内联编辑也需要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>
<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>
"mass editing"（一次内联编辑 100 行）一般来说不好，因为它会在页面上产生很多变化，每个元素的变化都遵循网络浏览器 reflow 对于所有现有元素 。此外，显示 100 行的网格，其中只有大约 25 行对用户可见（由于显示器的自然限制），另外降低了性能。
比较 the initial demo with another one 的性能，我只是在 "mass editing" 之前包括了 jQuery.hide 的调用，在 "mass editing" 之后包括了 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 的新调用重新创建冻结的列。它应该会额外提高性能。