Primefaces 数据表、overlayPanel 和 filter/sort 的奇怪行为

Question

我在使用 primefaces 数据表和每行的动态覆盖时遇到了一些问题。

基本上我有一个包含一定数量行的主数据表。对于每一行，我都有一个按钮和一个链接的叠加层，单击该按钮时，会在叠加层中显示一个小数据表（它列出了有关该行的最后更改）。

这里是简化的代码：

//the main datatable
<p:dataTable id="terminauxDataTable" var="terminalBean" widgetVar="dataTableWidgetVar" value="#{cc.attrs.listAllTerminals}" 
filteredValue="#{cc.attrs.listFilteredTerminals}">
...
<p:columnGroup>
  <p:row>
    <p:commandButton id="changelogButton"
               type="button"/>
    <p:overlayPanel id="changelogPanel" for="changelogButton"
       dynamic="true">
       //the small datatable for each row
       <p:dataTable var="changelog" value="#{terminalBean.lastChangelogs}">
          <p:column headerText="#{msg['commun.changelog.table.label.date']}">
              <h:outputText value="#{changelog.dateHr}">
                  <f:converter converterId="dateTimeConverter" />
              </h:outputText>
          </p:column>
          ... some other colums
       </p:dataTable>
    </p:overlayPanel>
</p:row></p:column></p:datatable>

乍一看一切正常。当我点击任何按钮时，我确实得到了我想要加载的内容。它应该看起来像这样： http://i.stack.imgur.com/n9GrW.png （抱歉，无法直接post图片）

一旦我对主数据表进行任何过滤和排序，问题就开始出现。如果自页面加载以来从未单击过特定按钮，则叠加层和包含的数据表加载成功。我是否应用过滤器或排序并不重要。如果我已经至少单击了一个按钮一次，然后我应用了 sort/filter，如果我尝试再次单击该按钮，则叠加层显示但为空，内部没有数据表。

这里是一个在过滤器上点击之前点击的按钮的例子： http://i.stack.imgur.com/eLGLo.png

关于如何解决这个问题，您有任何线索吗？谢谢

Answer 1

通过数据表优化地使用叠加层需要一些不同的方法，如 PrimeFaces showcase of the overlayPanel

中所示

您需要将 overlayPanel 放在数据表之外，在那里放一个可更新的容器，例如outputPanel 和列中的按钮，更新面板并使用特定参数调用覆盖面板的显示功能。像这样：

<p:dataTable>
    ....
    <p:column style="width:32px;text-align: center">
         <p:commandButton update=":form:terminalDetail" oncomplete="PF('myTerminalOP').show('#{component.clientId}')" icon="ui-icon-search" title="Details">
            <f:setPropertyActionListener value="#{selectedTerminal}" target="#{mySelectionView.selectedTerminal}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

<p:overlayPanel widgetVar="myOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true">
    <p:outputPanel id="terminalDetail" style="text-align:center;">
    ...
    </p:outputPanel>
</p:overlayPanel>

（免责声明：在我的 phone 上完成，因此可能存在拼写错误）

Primefaces 数据表、overlayPanel 和 filter/sort 的奇怪行为

Primefaces weird behaviour with datatable, overlayPanel and filter/sort

sorting

datatable

overlay

filter

primefaces