0

前言：我使用的是jqGrid 4.1.2（当前是4.5.2），所以我提到的一些性能问题可能已经修复。

我正在分析我的 JS 代码，我注意到 jqgrid 在我的初始网格绑定期间为每一行触发 afterInsertRow：$('#grid').jqGrid('addRowData', 'ID', data)这反过来又调用了一个调整网格容器 DIV 大小的函数。由于浏览器重绘事件是一个代价高昂的过程，对 afterInsertRow 的数百次调用最终导致 UI 出现了一点延迟。

我的问题是，解绑 jqGrid 事件的语法是什么？

4

2 回答 2

1

我认为您描述的性能问题的根源如下：

  • 你不使用gridview: true选项
  • 你使用afterInsertRowcallback 而不是 usage cellattr，rowattr而不是。

如果您检查将在填充网格期间使用的源代码行addJSONData，您将看到

if(ts.p.gridview === false ) {
    $("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append(rowData.join(''));
    self.triggerHandler("jqGridAfterInsertRow", [idr, rd, cur]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,idr,rd,cur);}
    rowData=[];
}

inside ofwhile遍历网格的所有行。在工具 jqGrid 中，将网格主体的数据保存在 arrayrowData中。数组rowData中的项目是作为 HTML 片段的字符串。

如果您使用gridview: true，则所有 jqGrid 主体将首先保存为数组中的字符串数组rowData，然后从数组中创建一个字符串，并在循环后rowData.join('')立即将 frin 放入主体中（参见行）。

如果您使用gridview: false（它是默认值!!!???），那么该数组rowData将被转换为字符串，并且该行将仅放置在每一行的循环内的页面上。我描述了答案中详述的方法的性能劣势。

而不是afterInsertRow用于自定义某些列的样式，cellattr而是应该使用（参见答案或代码示例）。如果您用于afterInsertRow自定义行的样式，则应rowattr改为使用（请参阅答案）。如果您需要自定义某些列的包含而不是样式，那么您应该使用自定义格式化程序。如果您遵循上述规则，那么您将不需要使用afterInsertRow回调，并且大网格的填充将非常快。

于 2013-06-29T11:38:24.687 回答
0

因为 jqgrid 事件被定义为网格属性，所以您可以使用该setGridParam方法重新分配事件参数。设置事件属性以null禁用事件。

grid_afterInsertRow不是匿名的，因此可以通过名称轻松引用。我还使用了一个非匿名函数，因为我不确定调用是否setGridParam会释放任何先前创建的传递给它的匿名函数引用。

function grid_afterInsertRow(rowID, rowData, rowElem) {
    // do stuff
}

function toggle_afterInsertRow(isEnabled) {

    if(isEnabled) {
        $('#grid').jqGrid('setGridParam', {afterInsertRow: grid_afterInsertRow});
    } else {
        $('#grid').jqGrid('setGridParam', {afterInsertRow: null});
    }

}

一些重构给出了上述代码的通用版本

// usage: toggleGridEvent($('#grid'), true, afterInsertRow, grid_afterInsertRow);
function toggleGridEvent($grid, isEnabled, eventName, callback) {

    var params = {};    

    if(isEnabled) {
        params[eventName] = callback;
    } else {
        params[eventName] = null;
    }


    $grid.jqGrid('setGridParam', {afterInsertRow: grid_afterInsertRow});

}
于 2013-06-28T21:23:19.330 回答