Question

在我的应用中，当用户点击某个项目时，我会在<p:tabView>中使用<p:dialog>来显示该项目的详细信息。根据项目类型，有些会有额外的标签。它类似于以下内容：

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" update="itemDetails" oncomplete="eventDialog.show();" />
   ...
</p:schedule>

<p:dialog id="detailsDlg" onHide="detailsTab.select(0);">
   <p:tabView effect="fade" widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

当我点击Book并导航到Author标签查看作者的详细信息时，请考虑这种情况。现在，如果我关闭对话框而不切换回General details标签，我点击Book以外的其他项目（这意味着它们没有Author标签），我的对话框似乎仍然在隐身 Author标签上。即使我尝试点击General tab，它也不会再渲染了。

更新

我尝试使用<p:tabView>和<p:dialog>的客户端API，并在detailsTab.select(0)的{{1}}属性中调用onHide。情况好一点。但是，单击<p:dialog>后单击的第一个项目（Book）将遇到与上述相同的情况。从第2项开始，一切都还可以。有没有办法让它立即运作？

如果你能告诉我如何解决这个问题，我将非常感激。

Answer 1

我终于找到了解决方案。在<p:tabView>标记中，我尝试通过设置effect="fade"来产生一些效果。我认为这种效果可能会导致代码执行时滞后，因此，在下一次请求之前，我看不到切换结果。

在我关闭效果并将detailsTab.select(0);放入oncomplete事件的<p:ajax>属性后，它现在正在运行。

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" 
           update="itemDetails" oncomplete="eventDialog.show();detailsTab.select(0);" />
   ...
</p:schedule>

<p:dialog>
   <p:tabView widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

需要注意的一点是，当我关闭effect而未将detailsTab.select(0);放入oncomplete事件的<p:ajax>属性时，仍会出现此问题。换句话说，对话框仍然显示隐形标签。但是，当我点击General标签时，此标签的内容已完美呈现。问题显然发生在我使用effect时。这可能是<p:tabView>的错误。

我认为我的解决方案不是很优雅，因为我不得不关闭效果：P。如果您能提供任何适用于effect的解决方案，我将非常乐意接受您的回答:)。

PrimeFaces 3.0：如何使用`<p：tabview>`</p：tabview>更改选项卡焦点

1 个答案: