我有一个JQGrid，我在网格上实现了折叠/全部展开按钮。它有效，但速度非常慢。这是我用过的代码，只需要120行就需要5-6秒。有没有办法改善这个的表现？提前谢谢！
function CollapseAll() {
$(".ui-icon-circlesmall-minus").trigger("click");
$("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus");
}
function ExpandAll() {
$(".ui-icon-circlesmall-plus").trigger("click");
$("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus");
}
var groups = [];
$("#grid").jqGrid({
url: '@Url.Action("GetLoanReport", "Report")',
datatype: "json",
emptyrecords: "0 records found",
height: "auto",
mtype: 'POST',
maxHeight: maxHeight,
postData: { startDate: $("#startDate").val(), endDate: $("#endDate").val(), selectedStatuses: selectedStatuses, selectedProductGroups: selectedProductGroups, assignedBranchList: assignedBranchList, assignedToList: assignedToList, createdByList: createdByList, approvedByList: approvedByList, uploadedByList: uploadedByList },
colNames: ['Branch', 'Status', 'Employee', 'Application ID', 'Customer Name', 'CustNo', 'Product Type', 'Description', 'Security Code', 'Final Rate', 'New Money', 'Total'],
colModel: [
{ name: 'Branch', index: 'Branch', cellattr: function () { return ' title="my custom fixed tooltip for the column"'; } },
{ name: 'Status', index: 'Status' },
{ name: 'EmplName', index: 'EmplName' },
{ name: 'ApplicationID', index: 'ApplicationID', sorttype: 'number', width: 125, sortable: true, formatter: createLink },
{ name: 'CustName', index: 'CustName', formatter: custnameFormatter, width: 200, sortable: true },
{ name: 'CustNo', index: 'CustNo', hidden: true, sortable: true },
{ name: 'ProductType', index: 'ProductType', width: 100, sortable: true, sorttype: "text" },
{ name: 'ProdDesc', index: 'ProdDesc', width: 250, sortable: true },
{ name: 'SecurityCode', index: 'SecurityCode', width: 125, sortable: true },
{ name: 'FinalRate', index: 'FinalRate', width: 75, align: "right", formatter: 'currency', formatoptions: { suffix: '%' }, sorttype: 'currency', sortable: true },
{ name: 'NewMoney', index: 'NewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true },
{ name: 'TotalNewMoney', index: 'TotalNewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true }
],
jsonReader: {
repeatitems: false,
root: 'rowdata',
page: 'currpage',
total: 'totalpages',
records: 'totalrecords'
},
loadComplete: function () {
WaitIndicatorClose();
var reportSum = $("#grid").jqGrid('getCol', 'TotalNewMoney', false, 'sum');
$("#gridPager_right").html("<div id='sumTotal'>Number of Applications: " + $("#grid").getGridParam("records") + ", Total: $" + formatMoney(reportSum, false, null, null, null, true, false) + '</div>');
$("#gridPager_right").show();
if (firstLoad == true) {
$(".ui-icon-circlesmall-plus, .ui-icon-circlesmall-minus").each(function () {
groups.push({ hid: $(this).closest("tr").attr("id"), collapsed: true });
});
} else {
$("#grid tr").each(function () {
for (var i = 0; i < groups.length; i++) {
if ($(this).attr("id") === groups[i].hid) {
if (groups[i].collapsed == false) {
$("#grid").jqGrid('groupingToggle', groups[i].hid);
}
}
}
});
}
firstLoad = false;
$(".gridghead_0").attr("title", "Created by Branch");
$(".appLink").on("click", function (e) {
var appID = e.currentTarget.innerHTML;
ConfirmBox("This will redirect you to the Application page. Are you sure?",
function () {
$.ajaxSetup({ cache: false });
$.ajax({
cache: false,
type: "Get",
url: "@Url.Action("VerifyAndSetApplicationID", "Application")",
data: { "applicationID": appID },
success: function (data) {
if (data.Error) {
MessageBox(data.Error);
} else {
if (data.Success) {
InitializeWriteAccess(appID);
} else {
MessageBox(data.NotFound);
}
}
},
error: function (xhr, status, error) {
},
complete: function () {
}
});
},
function () {
});
});
},
loadError: function () {
WaitIndicatorClose();
},
loadui: 'disable',
grouping: true,
onClickGroup: function (hid, collapsed) {
if ($(".ui-icon-circlesmall-plus").length == 0) {
$("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus");
} else {
$("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus");
}
for (var i = 0; i < groups.length; i++) {
if (groups[i].hid == hid) {
groups[i].collapsed = collapsed;
}
}
if (collapsed == true) {
$(".ui-icon-circlesmall-minus:hidden").each(function () {
for (var i = 0; i < groups.length; i++) {
if (groups[i].hid == $(this).closest("tr").attr("id")) {
groups[i].collapsed = true;
}
}
});
}
$('#grid').trigger('reloadGrid');
},
groupingView: {
groupField: ['Branch', 'Status', 'EmplName'],
groupText: ['<b>{0}</b> Count: ({1})', '<b>{0}</b> Count: ({1})', '<b>Created by {0}</b> Count: ({1})'],
groupSummary: true,
groupColumnShow: false,
groupSummaryPos: "header",
groupCollapse: true
},
loadonce: true,
rowNum: 10000,
showrownumbers: true,
toppager: true,
shrinkToFit: true,
pgbuttons: false,
pginput: false,
pager: gridPager
});
$("#grid").jqGrid('navGrid', '#gridPager', { add: false, edit: false, del: false, find: false, search: false, refresh: false });
$("#grid").jqGrid('navGrid', '#grid_toppager', { add: false, edit: false, del: false, find: false, search: false, refresh: false, width: 1093 });
$("#grid").jqGrid('navButtonAdd', '#grid_toppager_left', {
caption: "Expand/Collapse All",
buttonicon: "ui-icon-plus",
onClickButton: function () {
if ($(".ui-icon-circlesmall-plus").length == 0) {
CollapseAll();
} else {
ExpandAll();
}
$('#grid').trigger('reloadGrid');
}
});
$("#grid").jqGrid('navButtonAdd', '#gridPager', {
caption: "Export to Excel",
onClickButton: function () {
fnExcelReport();
}
});
});
答案 0 :(得分：0)
我认为您在代码中遇到了问题，但您没有发布。
我创建了the demo，其中包含120行虚拟数据和＆＃34;展开/折叠全部＆＃34;寻呼机中的按钮。它使用free jqGrid的当前（4.13.4）版本。与之前的（4.13.3）版本的免费jqGrid相同的演示的性能在我的测试中是相同的。您可以尝试一下，看看性能是否良好。
我使用了一些修改后的代码＆＃34;展开/折叠全部＆＃34;按钮，但它对于展开/折叠的性能应该没有区别。
.jqGrid("navButtonAdd", {
caption: "Expand/Collapse All",
id: "expand_collapse_all",
buttonicon: "ui-icon-plus",
onClickButton: function () {
var gridId = this.id, icons = this.p.treeIcons,
$expandCollapseAll = $("#expand_collapse_all");
if ($expandCollapseAll.find('.ui-icon-minus').length > 0) {
$expandCollapseAll.find('.ui-icon-minus')
.removeClass('ui-icon-minus')
.addClass("ui-icon-plus");
$(".tree-minus").trigger("click");
} else {
$expandCollapseAll.find('.ui-icon-plus')
.removeClass('ui-icon-plus')
.addClass("ui-icon-minus");
$(".tree-plus").trigger("click");
}
}
});
更新：我发现您上次发布的onClickGroup和loadComplete代码是您性能问题的根源。试试the demo，在你的情况下有1000行而不是120行。 1000行的扩展速度很慢，但在IE11上我的计算机上大约为0.5秒，在Chrome中大约为190毫秒。你报告的距离还有5-6秒。
The next demo在展开/折叠所有行之前隐藏网格，然后将其显示回来。它还可以提高性能。最后一个演示在Chrome中以160毫秒的速度在我的计算机上展开，在IE11中以350毫秒展开。