我以这种方式拥有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 条这样的记录，则加载网格需要很长时间，而且当我尝试向上或向下滚动时也会花费太多时间。
在没有绑定事件的情况下加载网格后，是否有其他更好的方法来重新调整列的大小？
任何人都可以在这个问题上帮助我吗？
谢谢