JQGrid重绘很慢
Posted
技术标签:
【中文标题】JQGrid重绘很慢【英文标题】:JQGrid Redrawing is slow 【发布时间】:2011-04-01 14:28:57 【问题描述】:大家好!
所以我在我的应用程序中使用 JQGrid 已经有一段时间了,在我开始优化之前,网格的速度并没有真正困扰我。
如果发现即使我有一个小网格(每页 20 个项目),悬停突出显示很慢,并且如果网格恰好需要页面上的滚动条,则页面的滚动真的很慢。
我尝试过异步发帖和 loadonce:true,但它们的绘制速度都一样慢。
我正在使用 jquery.ui.theme css。
我已经一起删除了分页,因此网格在屏幕上绝对只包含 20 个项目,并且悬停的绘制仍然很慢。
为了确保我的页面上没有其他内容,我将网格的显示设置为无,并且页面像往常一样快速运行 - 正如我所怀疑的那样。
使用 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"
);
【问题讨论】:
您能否发布完整的 javascript 代码(例如函数 filterGroup、setGridWidth、loadAnswersGrid 等),其中可以看到 ID 为 VariableGridContentConainer、QuestionTree、FQ 等元素的 HTML 代码。此外,您可以从服务器保存一个测试 JSON 响应(您可以使用 Fiddler,参见 fiddler2.com/fiddler2 或 Firebug)。这样就可以在不运行服务器的情况下重现您的问题。看来你可以改进一下,但必须有完整的代码才能更准确。 【参考方案1】:你没有发布完整的 JavaScript 代码,所以我写了一些评论,你的 jqGrid 如何可以根据现有信息进行优化。
-
您最好避免使用
afterInsertRow
,并在gridComplete
或loadComplete
中做同样的工作。然后你可以在 jqGrid 的定义中添加gridview: true
参数,网格将被快速构建(阅读jqgrid, firefox and css- text-decoration problem 了解更多详情)。您在afterInsertRow
中的当前操作可以轻松替换为loadComplete
或gridComplete
中的jQuery('.jqgrow',jQuery('#tblVariables')).addClass('jstree-draggable');
。
您根据隐藏的HiddenGroups
列的包含来构造Groups
列的值。您从服务器发送的包含Groups
列的数据似乎被覆盖了。您可以针对Groups
的custom formatter 构造相同的包含Groups
列。那么可能你可以完全删除不需要的HiddenGroups
列。查看jqGrid: Editable column that always shows a select 以获取自定义格式化程序的示例,并查看Add multiple input elements in a custom edit type field 作为custom editing 的示例。 custom unformater 的定义可能对您来说也很有趣。
有点品味问题,但在HiddenVar
列中使用formatter:'checkbox'
似乎我很合适。此外,可以看到您从服务器发送“True”或“False”字符串作为列的值。发送 1 和 0 会得到相同的结果,但会减小大小
发送的数据。
如果您删除一些默认值(如 jsonReader
)或不推荐使用的值(如 imgpath
(参见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:upgrade_from_3.4.x_to_3.5)并从 colModel
中删除默认值(如 editable: false
),则可以减小 javascript 的大小.
jqGrid 的其他一些通用优化方法的描述您可以在what is the best way to optimize my json on an asp.net-mvc site 中找到。
更新:您可能并不真的需要在Groups
中插入选择元素。相反,您只能在该行被选中或处于编辑模式时执行此操作。从整个Groups
中删除选择元素的构造可以提高网格的性能并简化代码。您可以使用editoptions
和value
作为函数或使用editoptions 的其他可能性。 onchange
事件到 select 的绑定然后可以替换为 dataEvents
与 type: 'change'
。
【讨论】:
您好!我现在刚刚看了我的邮件。非常感谢你的回复!你真的很有帮助 ^_^ 当我回到办公室时,我会尝试一些改变并让你知道我的结果。非常感谢您的深思熟虑和有益的回复。以上是关于JQGrid重绘很慢的主要内容,如果未能解决你的问题,请参考以下文章