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和列中的按钮上，更新面板并使用特定参数调用覆盖面板的show功能。像这样：

<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>

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

使用datatable，overlayPanel和filter / sort来表示奇怪的行为

1 个答案: