Привет всем!
Так что у меня уже некоторое время есть JQGrid в моем приложении, и скорость сетки не беспокоила меня до тех пор, пока яначалась оптимизация.
Если обнаружится, что даже если у меня небольшая сетка (20 элементов на странице), подсветка при наведении будет медленной, и если для сетки требуется полоса прокрутки на странице, прокрутка страницыочень медленно.
Я пробовал асинхронные сообщения, а также loadonce: true, и они оба рисуют так же медленно.
Я использую jquery.ui.themecss.
Я удалил пейджинг все вместе, так что сетка абсолютно содержит только 20 элементов на экране, и тем не менее рисование при наведении идет медленно.
Просто чтобы быть уверенным, что это ничегоеще на моей странице я установил отображение сетки на none, и страница работала быстро, как обычно - как я и подозревал.
Используя отладчик IE8, я использовал профилировщик для измерения скорости работы моего 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"
}
});