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