jqgrid解除绑定/切换网格事件

前言：我使用的是jqGrid 4.1.2（当前为4.5.2），因此我提到的一些性能问题可能已经解决

我在分析我的JS代码时，我注意到jqgrid在初始网格绑定期间为每一行触发afterInsertRow:

$（“#grid”）.jqgrid（'addRowData'，'ID'，data）

，它反过来调用了一个函数，该函数调整了网格容器DIV的大小。因为浏览器重画事件是一个代价高昂的过程，数百次对afterInsertRow的调用最终导致UI中出现了一些延迟

---

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

因为jqGrid事件定义为网格属性，所以可以使用

setGridParam

方法重新分配事件参数。将事件属性设置为

null

将禁用该事件

grid\u 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});

}

---

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

• 您不使用

  gridview:true

  选项
• 您可以使用

  afterInsertRow

  回调代替用法

  cellattr

  ，

  rowttr

如果您检查

addJSONData

的源代码，在填充网格期间将使用该源代码，您将看到

if（ts.p.gridview==false）{
$（“#”+$.jgrid.jqID（ts.p.id）+“tbody:first”）.append（rowData.join（“”））；
triggerHandler（“jqGridAfterInsertRow”，[idr，rd，cur]）；
if（afterInsRow）{ts.p.afterInsertRow.call（ts，idr，rd，cur）；}
rowData=[]；
}

在

的内部，而
在网格的所有行上循环。在工具jqGrid中，将网格主体的数据保存在数组
rowData
中。数组
rowData
中的项是HTML片段的字符串

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

如果使用
gridview:false
（默认值！！！？？），则数组
rowData
将转换为字符串，并且对于每一行，该行将仅放在循环内的页面上。我在中详细描述了该方法的性能缺点

不要使用
afterInsertRow
要自定义某些列的样式，应使用
cellatr
（有关代码示例，请参见或）。如果使用
afterInsertRow
自定义行的样式，则应改用
rowattr
（请参阅）。如果需要自定义某些列的包含，而不是仅自定义样式，则应使用。如果您遵循上述规则，则无需使用
afterInsertRow
回调，大网格的填充速度将非常快。
@WalterStabosz:欢迎您！如果您有问题，您应该在问题的文本后面附加您使用的JavaScript代码。至少选项
datatype
，
loadonce
，
colModel
和回调代码
afterInsertRow
，
loadComplete
，
gridComplete
可能非常重要。
gridview:true
如广告所示工作，但引入了其他问题。我想要的功能是：当用户添加新行或加载一组新数据时，让网格自动调整自身大小（通过
setGridHeight
）及其容器
div
（通过自定义函数）。我在插入行之后调用了resize函数，但正如您所看到的，它是在批插入数据之后调用的。我认为在我的情况下，
cellatr
&
rowattr
不起作用。最后，我决定去掉
afterInserRow
，在任何
addRowData
@WalterStabosz之后手动调用我的resize函数：不需要使用
setGridHeight
。可以使用
height:“auto”
选项来代替该选项。我不知道任何
gridview:true
会产生问题的例子。您应该包括
afterInsertRow
回调的代码。在这种情况下，我可以展示一个人可以做什么。在
afterInsertRow
内部，我所做的就是调用我在这里定义的
resizeGridHeight
函数：。@WalterStabosz:您是否尝试使用
height:“auto”
？当不同的行有不同的高度时，它工作得很好。