关于jqgrid：浏览器内存使用情况比较：内联onClick与使用JQuery .bind()

Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()

我在页面上有约400个元素，这些元素具有关联的单击事件(4种不同类型的按钮，每个按钮具有100个实例，每种类型的单击事件执行相同的功能，但参数不同)。

我需要最大程度地减少对性能的影响。通过将单击事件分别绑定到每个事件(使用JQuery的bind())，我会获得什么样的性能提升(内存等)？内联onclick而是在每个按钮上调用该函数会更有效吗？

为澄清起见进行编辑:)：
我实际上有一个表(使用JQGrid生成)，每行都有数据列，后跟4个图标"按钮"列-删除

因为您不仅需要带有一些容器对象的常规解决方案，而且还需要jqGrid的解决方案，我可以为您提供另一种方法。

问题是jqGrid已经建立了一些onClick绑定。因此，如果仅使用jqGrid事件处理程序中的现有资源，则不会花费更多资源。以下两个事件处理程序可能对您有用：onCellSelect和beforeSelectRow。为了使大多数行为与您当前拥有的行为保持亲密关系，建议您使用beforeSelectRow事件。这样做的好处是，如果用户从您的自定义按钮上单击一个，则行选择可以保持不变。使用onCellSelect时，将首先选择该行，然后选择onCellSelect事件处理程序。

您可以使用以下按钮来定义列

1
2
3
4

{ name: 'add', width: 18, sortable: false, search: false,
formatter:function(){
return"<span class='ui-icon ui-icon-plus'></span>"
}}

在上面的代码中，我确实使用了jqGrid的自定义格式化程序，但没有任何事件绑定。

的代码

1
2
3
4
5
6
7
8
9
10

beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol >= firstButtonColumnIndex) {
alert("rowid="+rowid+"\
Button name:"+buttonNames[iCol]);
}

// prevent row selection if one click on the button
return (iCol >= firstButtonColumnIndex)? false: true;
}

其中firstButtonColumnIndex = 8和buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}。在您的代码中，您可以将alert替换为相应的函数调用。

如果要始终选择按钮上的行，请单击以简化代码，直到执行以下操作

1
2
3
4
5
6

onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
if (iCol >= firstButtonColumnIndex) {
alert("rowid="+rowid+"\
Button name:"+buttonNames[iCol]);
}
}

以一种使用绑定到整个表的现有click事件处理程序的方式(请参见源代码)，只是说出jqGrid您要使用的处理程序。

我建议您还始终使用gridview:true来加快jqGrid的构建速度，但是如果您使用被视为选项的afterInsertRow函数，则不能使用它。

您可以在此处查看演示。

已更新：您必须使用的另一个选择是formatter:'actions'，请参见为答案准备的演示。如果您查看'actions'格式化程序的代码，则从事件绑定方面看，它的工作方式与当前代码非常相似。

更新2：您可以在此处查看代码的更新版本。

相关讨论

您是否考虑过使用delegate()？您将在一个容器元素上有一个处理程序，而不是数百个。像这样的东西：

1
2
3
4
5

$('#container').delegate('.your_buttons','click',function(e){
e.preventDefault();
var your_param = $(this).data('something'); // store your params in data, perhaps
do_something_with( your_param );
});

假定这样的总体布局：

1
2
3
4
5
6

Alpha
Beta
Gamma
Omega

相关讨论

您应该使用.delegate()方法通过jQuery将所有元素的单击处理程序绑定到所有按钮的父元素。

对于不同的参数，可以对每个元素使用data-属性，然后使用.data()方法检索它们。

相关讨论