3
嘿，大家好！JQGrid重繪速度慢
所以我現在在我的應用程序一段時間了jqGrid的和速度電網處理不當的真正困擾我，直到我開始優化。
如果發現即使我有一個小網格（每頁20個項目）懸停突出顯示速度很慢，並且如果網格碰巧需要頁面上的滾動條，頁面的滾動確實很慢。
我試過異步帖子也loadonce：真，他們都畫慢。
我正在使用jquery.ui.theme css。
我已經一起刪除了分頁，因此網格絕對只在屏幕上包含20個項目，並且懸停的繪圖仍然很慢。
只是爲了確保它在我的頁面上沒有任何其他內容，我將網格的顯示設置爲無，並且頁面像往常一樣快速運行 - 就像我懷疑的那樣。
使用IE8調試器，我使用profiler來測量我的javascript和html的速度，這些速度非常快 - 所以它絕對是屏幕上的網格繪圖。
我很感激任何和所有幫助或建議以提高性能。
我會附上我的網格定義（這是相當大的），萬一你可能認爲它可能是一些有：
$("#tblVariables").jqGrid({
url: '/StudyAdmin/GetVariable.aspx?FilterType=' + Filter + '&SelectedFolder=' + SelectedFolder + '&SelectedGroup=' + SelectedGroup,
datatype: "json",
mtype: "POST",
colNames: ['Variable Name', 'Hidden Original Text', 'Original Text', 'Label', 'Hidden', 'Groups', 'HiddenGroups'],
colModel: [
{ name: 'VarName', index: 'VarName', editable: false },
{ name: 'VarOriginalText', index: 'VarOriginalText', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'VarOriginalTextToShow', index: 'VarOriginalTextToShow', editable: false, sortable: false },
{ name: 'VarReportingText', index: 'VarReportingText', editable: true },
{ name: 'HiddenVar', index: 'HiddenVar', editable: true, edittype: "select", editoptions: { value: { "true": "True", "false": "False"}} },
{ name: 'Groups', index: 'Groups', editable: false },
{ name: 'HiddenGroups', index: 'HiddenGroups', hidden: true, editable: true, editrules: { edithidden: true} }
],
editurl: "/StudyAdmin/Editvariable.aspx",
height: "100%",
gridComplete: function() {
var grid = jQuery("#tblVariables");
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i];
var splitGroups = $('#tblVariables').getCell(rowId, 'HiddenGroups').split(",");
if (splitGroups.length == 1 && splitGroups[0] == "") splitGroups = "";
var GroupSelect = "<select id='Group_" + rowId + "' onchange='filterGroup(this)'>";
if (splitGroups.length > 0) GroupSelect += "<option value='HasSelectGroup'>Select Group</option>";
else GroupSelect += "<option value='NotHasSelectGroup'>No Groups</option>";
for (var k = 0; k < splitGroups.length; k++) {
GroupSelect += "<option value='" + splitGroups[k] + "'>" + splitGroups[k] + "</option>";
}
//add all groups in here
GroupSelect += "</select>";
grid.jqGrid('setRowData', rowId, { Groups: GroupSelect });
}
setGridWidth($("#VariableGridContentConainer").width() - 19);
},
afterInsertRow: function (rowid, rowdata, rowelem) {
$("#" + rowid).addClass('jstree-draggable');
},
ondblClickRow: function (id, ri, ci) {
lastSelRow = id;
$("#tblVariables").jqGrid('editRow', id, true);
},
onSelectRow: function (id) {
if ($('#QuestionTree').find("#FQ" + id).attr("id") !== undefined) {
$.jstree._focused().select_node("#FQ" + id);
}
if (id == null) {
//$("#tblAnswers").setGridParam({ url: "/StudyAdmin/GetAnswers.aspx", page: 1 }).trigger('reloadGrid');
$('#tblAnswers').GridUnload();
loadAnswersGrid("-1");
} else {
//$("#tblAnswers").setGridParam({ url: "/StudyAdmin/GetAnswers.aspx?id=" + id, page: 1 }).trigger('reloadGrid');
$('#tblAnswers').GridUnload();
loadAnswersGrid(id);
if (id && id !== lastSelRow) $("#tblVariables").jqGrid('saveRow', lastSelRow);
}
},
viewrecords: true,
rowNum: 20,
loadonce: true,
pager: jQuery('#pagernav'),
sortname: 'VarName',
sortorder: "asc",
imgpath: '/Content/Images/',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
}
});
你可以發佈完整的JavaScript代碼（例如函數filterGroup，setGridWidth，loadAnswersGrid等），HTML代碼可以看到具有ID VariableGridContentConainer，QuestionTree，FQ等元素。此外，您可以從服務器保存一個測試JSON響應（您可以使用Fiddler，請參閱http://www.fiddler2.com/fiddler2/或Firebug）。然後，無需運行服務器就可以重現問題。看起來你的罐頭可以很好地改進，但必須有完整的代碼才能更精確。 – Oleg 2010-08-20 11:09:57