根据行数据组件中的选择更新行扩展中的选项卡内容

Question

首先，我已经解决了几乎所有（如果不是全部）关于 SO 的相关问题，获得了一些重要的信息和见解，但无法找到适合我的场景的解决方案。

其中一些重要链接：

How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
How do PrimeFaces Selectors as in update="@(.myClass)" work?
Primefaces update component after <p:ajax listener>

其次，我有以下场景，它与提到的一些问题相似但不相同。我实现了 p:datatable 扩展选项卡。该行包含一个 selectBox，我想要的是根据在 selectBox 中选择的值更改扩展选项卡中的值。我在这里删除了相关代码，

<h:form id="formId" onkeypress="if (event.keyCode == 13) { return false; }">
<h:panelGrid columns="2" styleClass="top-align">
    <p:panel>
        <p:dataTable id="dataList"
                     value="#{backingBean.list}"
                     var="item"
                     widgetVar="listTable"
                     selection="#{backingBean.selectedItem}"
                     rowKey="#{item.serialNumber}"
                     filteredValue="#{backingBean.filteredItem}"
                     >

            <p:column headerText="Fare">
                <p:selectOneMenu value="#{item.selectedFare}" converter="#{fareConverter}" var="t"
                                 effect="fade" class="blue font-16 increased-height center-align middle-align">
                    <f:selectItems value="#{item.fares}" var="fare"
                                   itemLabel="#{('&#8377; ').concat(fare.fareAmount)}"
                                   itemValue="#{fare}" />

                    <p:column>
                        <h:outputText value="#{t.fareAmount}" rendered="#{not empty t.fareAmount}"
                                      class="font-16">
                            <f:convertNumber type="currency" currencySymbol="&#8377; " maxFractionDigits="0"/>
                        </h:outputText><br/>
                        <h:outputText value="#{(' (').concat(t.fareName).concat(')')}"
                                      rendered="#{not empty t.fareName}" class="smallFont"/>
                    </p:column>
                    <p:ajax update=":tabs:fareRowTogglerTab"/>
                </p:selectOneMenu>
            </p:column>
            <p:rowExpansion>
                <p:tabView id="tabs" dynamic="true" cache="true">
                    <p:tab title="Fare Details">
                        <p:panelGrid id="fareRowTogglerTab">
                            <p:row>
                                <p:column class="right-align">
                                    <h:outputText value="Base Fare:"/>
                                </p:column>
                                <p:column class="left-align">
                                    <h:outputText value="#{item.selectedFare.fareAmount}" class="blue font-16">
                                        <f:convertNumber type="currency" currencySymbol="&#8377; " maxFractionDigits="0"/>
                                    </h:outputText>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:tab>
                </p:tabView>
            </p:rowExpansion>
        </p:dataTable>
    </p:panel>
</h:panelGrid>

我已经为

尝试了很多其他的子表达式组合

<p:ajax update="..." />

但正如我所说，到目前为止没有任何效果。

我正在使用 Primefaces 6.1

Answer 1

这样试试，

update=":form:table:currentRow:tab:component"

最好的方法是检查生成的 html 并将 dynamicComponent 替换为 JSF/Primefaces 选择器。

根据行数据组件中的选择更新行扩展中的选项卡内容

Update tab content in row expansion based on selection in row data component

primefaces

jsf-2