0
Я имею JQgrid таким образом,Как повысить производительность 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, это занимает много времени, чтобы загрузить сетку, а также, когда я пытаюсь прокручивать вверх или вниз, и это занимает слишком много времени.
Есть ли другой лучший способ изменить размер столбцов после загрузки сетки без события привязки?
Может ли кто-нибудь помочь мне в этом выпуске?
Thanks