PrimeFaces嵌套DataTable的Ajax rowSelect事件范围异常问题

问题核心是DOM事件冒泡导致内层表格的选择操作触发了外层表格的rowSelect/rowUnselect监听器，以下是两种高效解决方法：

方法一：在外层Ajax事件中阻止事件冒泡 #

直接给外层的<p:ajax>标签添加onstart属性，调用event.stopPropagation()阻止事件向上传播，这样内层表格的事件就不会触发外层监听器。

修改后的外层Ajax代码片段：

<p:ajax event="rowSelect" update=":buttonForm"
        listener="#{managedBean.onRowSelect}"
        onstart="event.stopPropagation();"/>
<p:ajax event="rowUnselect" update=":buttonForm"
        listener="#{managedBean.onRowUnSelect}"
        onstart="event.stopPropagation();"/>

方法二：给内层DataTable绑定事件阻止冒泡 #

如果不想修改外层Ajax，也可以给内层DataTable添加onclick属性，直接在内层阻止事件冒泡：

<p:dataTable rowSelectMode="checkbox" id="#{index}materialsTable"
             widgetVar="#{index}materialsTableWidget" lazy="false"
             value="#{project.materials}" var="material"
             selection="#{project.selectedMaterials}" rowKey="#{material.id}"
             onclick="event.stopPropagation();">

修改后的完整代码示例 #

<p:dataTable id="projectsTable" widgetVar="projectsTableWdgt"
             value="#{managedBean.tempProjects}" var="project" rowIndexVar="index"
             rowExpandMode="single" lazy="false"
             rowKey="#{project.id}" selection="#{managedBean.selectedProject}"
             filteredValue="#{managedBean.filteredProjects}"
             globalFilterOnly="#{managedBean.globalFilterOnly}"
             selectionMode="single">
    <p:column style="width:25px;">
        <p:rowToggler id="#{index}rowToggler"/>
    </p:column>
    <!-- 外层Ajax添加onstart阻止冒泡 -->
    <p:ajax event="rowSelect" update=":buttonForm"
            listener="#{managedBean.onRowSelect}"
            onstart="event.stopPropagation();"/>
    <p:ajax event="rowUnselect" update=":buttonForm"
            listener="#{managedBean.onRowUnSelect}"
            onstart="event.stopPropagation();"/>

    <p:rowExpansion id="#{index}rowExpansion" widgetVar="#{index}rowExpansionWidget">
        <p:dataTable rowSelectMode="checkbox" id="#{index}materialsTable"
                     widgetVar="#{index}materialsTableWidget" lazy="false"
                     value="#{project.materials}" var="material"
                     selection="#{project.selectedMaterials}" rowKey="#{material.id}">
            <p:column id="#{index}materialSelection" selectionMode="multiple"
                      style="width:25px;text-align:center"/>
            <p:column headerText="Material" styleClass="customColumn">
                <h:outputText
                        value="#{material.materialNumber}"
                        readOnly="true"
                        readonlyCell="true"></h:outputText>
            </p:column>
            <p:column headerText="Material Description" styleClass="customColumn">
                <h:outputText value="#{material.description}"></h:outputText>
            </p:column>
            <p:column headerText="Material Group" styleClass="customColumn">
                <h:outputText value="#{material.materialGroup}"></h:outputText>
            </p:column>
            <p:column headerText="Material Type" styleClass="customColumn">
                <h:outputText value="#{material.materialType}"></h:outputText>
            </p:column>

            <p:ajax event="rowSelectCheckbox" update=":buttonForm"
                    listener="#{managedBean.onRowSelectCheckbox}"/>
            <p:ajax event="rowUnselectCheckbox" update=":buttonForm"
                    listener="#{managedBean.onRowUnselectCheckbox}"/>
            <p:ajax event="toggleSelect" update=":buttonForm" partialSubmit="true"
                    listener="#{managedBean.onToggleSelect}"/>
        </p:dataTable>
    </p:rowExpansion>
</p:dataTable>

内容的提问来源于stack exchange，提问作者Samet Dağ