JQGrid重绘速度很慢

Question

大家好!

所以我现在已经在我的应用程序中使用了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"
        }
    });

Answer 1

你没有发布完整的JavaScript代码,所以我写了一些评论,你可以根据现有的信息优化jqGrid.

1. 你最好避免使用afterInsertRow,做同样的工作,gridComplete或loadComplete.然后你可以gridview: true在jqGrid的定义中添加参数,并且网格将被快速构建(阅读jqgrid,firefox和css-text-decoration问题以获取更多细节).在当前的操作afterInsertRow可以通过简单的更换jQuery('.jqgrow',jQuery('#tblVariables')).addClass('jstree-draggable');中loadComplete或gridComplete.
2. 您可以Groups根据隐藏HiddenGroups列的包含构造列的值.您从服务器发送的包含Groups列的数据似乎被覆盖.您可以构建包含相同的Groups列相对的自定义格式化的Groups.然后可能你可以删除不需要的HiddenGroups列.看看jqGrid的:可编辑栏始终显示选择自定义格式的一个例子,在一个自定义编辑类型字段添加多个输入元素为例的自定义编辑.可能定义自定义unformater对您来说也很有趣.
3. 这有点像品味问题,但formatter:'checkbox'对于专栏的使用HiddenVar似乎是合适的.此外,可以看到您从服务器发送"True"或"False"字符串作为列的值.发送1和0遵循相同的结果,但减少发送的数据的大小.
4. 如果删除某些默认值(如jsonReader)或不推荐使用的值imgpath(如http://www.trirand.com/jqgridwiki/doku.php?id=wiki:upgrade_from_3.4.x_to_3.5),则可以减小javascript的大小)并从colModel(像editable: false)中删除默认值.

jqGrid的一些其他一般优化方法的描述,你可以找到在asp.net-mvc网站上优化我的json的最佳方法.

更新:可能你真的不需要插入选择元素Groups.而不是只有在选择行或处于编辑模式时才能执行此操作.从整体中删除选择元素的构造Groups可以提高网格的性能并简化代码.您可以使用editoptionswith value作为函数或使用editoptions的其他可能性.结合 onchange事件的选择可以再换到dataEvents用type: 'change'.