在 rich:dataTable 的某些列中避免 onRowClick 事件答案

【问题标题】：Avoid onRowClick event in certain column of rich:dataTable在 rich:dataTable 的某些列中避免 onRowClick 事件
【发布时间】：2016-04-08 12:47:24
【问题描述】：

我有一个rich:dataTable，其中包含 4 列。

第一个是selectBooleanCheckBox，它将一个名为“CheckEvent”（仅用于示例）的事件触发到 bean 中。

同时，dataTable 还支持onRowClick 事件，该事件会在 bean 上触发“onRowClick”。

我面临的问题是，当我单击第一列（复选列）时，onRowClick 也会触发。在这种情况下，这肯定是一个问题：如果选中了某行而我只想取消选中它，onRowClick 会突出显示该行，这是我不想要的行为。

我尝试在其他三个rich:columns 中定义oOnRowClick 事件，但是我通过这种方式实现的结果是什么；事件甚至没有触发，所以数据表没有onRowClick。

尝试通过 bean 进行逻辑也不起作用，因为当我进入 onRowClick() 方法时，我不知道推送的是哪一列。

我真的很绝望。任何帮助将不胜感激。

【问题讨论】：

您放回了 [javascript] 标签。我不同意这一点。 [javascript] 用户无法回答这个问题，因为他们不了解 [jsf]。他们无法确定 RichFaces 特定的 onRowClick 事件在 HTML/JS 上下文中的确切表示方式。另一方面，[jsf] 尤其是 [richfaces] 用户确实了解 [javascript]，更重要的是，了解 RichFaces 生成的 HTML/JS 输出。如果您能够将问题归结为一些 jsfiddle 演示，那么当然 [javascript] 是适用的，但 [jsf]/[richfaces] 反过来是有问题的；）

标签： javascript jsf richfaces onrowclick

【解决方案1】：

onrowclick 在表格行上添加onclick，如果您不希望它触发，则必须防止复选框上的点击事件冒泡到该行，例如：

<h:selectBooleanCheckbox onclick="event.stopPropagation()" … />

【讨论】：

谢谢，就是这样； )

【解决方案2】：

我可以看到这个 <h:selectBooleanCheckbox onclick="event.stopPropagation()" … /> 使用selectBooleanCheckbox 非常适合解决 QA 的问题。

如果不应该对 onclick 事件做出反应的列包含一个可点击的图标，那么类似的工作是否会起作用？应该执行不同的功能？请看下面的例子：

<rich:panel headerClass="panelHeader" styleClass="panel">
    <f:facet name="header">Header</f:facet>
    <rich:dataTable id="myTable" value="#{myModel}" var="k">

        <a4j:support event="onRowClick" action="#{myAction.selectItem(k, facesContext.viewRoot.viewId)}"
                            reRender="myTable"/>

            <rich:column>
                <f:facet name="header">
                        <h:outputText value="Normal Column - should be clickable"/>
                </f:facet>
                <h:outputText value="#{k.name}"/>
            </rich:column>

            <rich:column >
                <f:facet name="header">
                    <h:outputText value="Only Click on Icon should react to Mouseclick"/>
                </f:facet>
                <s:graphicImage value="/img/bin_closed.gif">
                    <a4j:support event="onclick"
                                 action="#{myAction.deleteItem(k)}"
                                 reRender="myTable"
                                 ajaxSingle="true" limitToList="true"
                                 onsubmit="if(!confirm('Really?')) { return false; }" />/>
                </s:graphicImage>
            </rich:column>

    </rich:dataTable>

</rich:panel>

【讨论】：