Primefaces 使用数据表、overlayPanel 和过滤器/排序的奇怪行为

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 （抱歉，不能直接发图）

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

这里是一个在过滤器之后点击之前点击过的按钮的示例： 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>

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