我这样使用JQgrid，
<div id="dialogLoading" style="position:absolute;z-index:1005">
<img src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" />
</div>
<table id="list"></table>
$(function () {
"use strict";
var getGridData = function(n) {
var data = [], i;
for (i = 0; i < n; i++) {
data.push({
id: (i + 1)*10,
aa: "aa" + i, // colunn 1
bb: "bb" + (i%3), // colunn 2
cc: "cc" + (i%5), // colunn 3
dd: "dd" + (i%7), // colunn 4
ee: "ee" + (i%11), // colunn 5
ff: "ff" + (i%13), // colunn 6
gg: "gg" + (i%17), // colunn 7
hh: "hh" + (i%19), // colunn 8
ii: "ii" + (i%23), // colunn 9
jj: "jj" + (i%29), // colunn 10
kk: "kk" + (i%31), // colunn 11
ll: "ll" + (i%37), // colunn 12
mm: "mm" + (i%41) // colunn 13
});
}
return data;
},
$grid = $("#list"),
gridData,
startTime,
measureTime = false,
timeInterval;
gridData = getGridData(3000);
startTime = new Date();
$("#list").jqGrid('GridUnload');
var grid = $("#list");
grid.bind('jqGridLoadComplete',function(e,data) {
setSizeOfgrid();
});
$grid.jqGrid({
data: gridData,
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" },
{ name: "hh", label: "c08" },
{ name: "ii", label: "c09" },
{ name: "jj", label: "c10" },
{ name: "kk", label: "c11" },
{ name: "ll", label: "c12" },
{ name: "mm", label: "c13" }
],
cmTemplate: { width: 100, autoResizable: true },
iconSet: "fontAwesome",
rowNum: 20,
rownumWidth: 40,
rowList: [20, 100, 1000, 10000, "100000:All"],
viewrecords: true,
rownumbers: true,
toppager: true,
pager: true,
shrinkToFit: false,
onSortCol: function () {
startTime = new Date();
measureTime = true;
},
loadComplete: function () {
closeDialogLoading();
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 () {
var $self = $(this);
openDialogLoading();
setTimeout(function () {
$self.jqGrid("setGridParam", { search: true })
.trigger("reloadGrid", [{ page: 1 }]);
}, 0);
startTime = new Date();
measureTime = true;
return true;
}
}).jqGrid("gridResize");
timeInterval = new Date() - startTime;
setTimeout(function () {
alert("Total time: " + timeInterval + "ms");
}, 50);
function openDialogLoading(){
$("#dialogLoading").css("display", "");
}
function closeDialogLoading(){
$("#dialogLoading").hide();
}
});
function setSizeOfgrid()
{
$("#list").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
var $this = $("#list"),
colModel = $this.jqGrid("getGridParam", "colModel"),
iCol,
iRow,
rows,
row,
n = $.isArray(colModel) ? colModel.length : 0,
cm;
var rowData = "";
var rowDataLen="";
var input = [];
var colWidth=130;
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
var is = cm.name.indexOf("c07");
var wm = cm.name.indexOf("c08");
var em = cm.name.indexOf("c09");
input = [];
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
rowData = $(row.cells[iCol]).attr('title');
if(rowData != undefined)
{
rowDataLen = rowData.length;
}
else if (rowDataLen < colWidth)
{
rowDataLen =colWidth;
}
input.push(rowDataLen);
}
finalWidth = Math.max.apply(null, input);
if((is >= 0 || wm >= 0 || em >= 0) && (finalWidth < 300))
continue;
$("#list").jqGrid("setColWidth", iCol, finalWidth);
var gw = $("#list").jqGrid('getGridParam','width');
if(gw <=1600)
{
$("#list").jqGrid('setGridWidth',1500);
}
else{
$("#list").jqGrid('setGridWidth',gw);}
}
});
}
我试图根据网格内容以这种方式完全加载网格后调整网格列的大小，
var grid = $("#list");
grid.bind('jqGridLoadComplete',function(e,data) {
setSizeOfgrid();
});
所以，在方法setSizeOfgrid中，我实际上是完全重新设置列的宽度。这工作正常。如果我有1000条记录。但是如果我有像10,000这样的记录，那么它需要花费很多时间来加载网格，当我尝试向上或向下滚动也会花费太多时间。
在没有绑定事件的情况下加载网格后，还有其他更好的方法来重新调整列的大小吗？
有谁可以帮我解决这个问题？
由于
答案 0 :(得分：0)
我不确定您要实施的方案。仅需要测量性能，需要10000行无分页的测试。这样的测试对现实没有价值，因为允许在实际应用程序中显示10000行甚至1000行的可能性将是程序中的明显错误。显示器仅允许显示20-30行。显示10000行代替意味着使页面缓慢地增加1000倍而对用户没有任何好处。用户只能看到20-30行，他必须点击滚动并查看其他内容。本地分页的使用使页面更负责，更友好。
函数setSizeOfgrid的代码似乎也有点奇怪。您似乎尝试实现autoResizeColumn方法的行为（请参阅the wiki article）。要查看其工作的性能，您可以获得the demo，选择显示1000行（对我来说10000似乎真的不切实际），然后在列标题之间双击。它将调用autoResizeColumn方法（$("#grid").jqGrid("autoResizeColumn", columnName);），它从列的所有单元格中获取所有文本的宽度，并更改列的宽度。您可以包含autoResizing: { minColWidth: 30, maxColWidth: 130 }之类的选项，以在自动宽度调整大小期间限制列的最小值和最大值。 autoResizeColumn的第二个布尔参数允许在调整列大小后强制调整网格的宽度。