Primefaces更新仅选择的选项卡

Question

我有这样的情况，当“select”事件被触发时，我想更新页面上的多个组件。 然而，其中两个位置位于tabView内，我只想在它们在当前选定的选项卡内时更新这些组件。我猜测我需要的是类似以下内容的东西...

<p:ajax event="select" 
        update="@(<don't know what to put here> .ui-tabs-selected)" 
        listener="#{treeSelectionView.onNodeSelect}" />

但我不确定。 我尝试的另一种策略是将tabView设置为dynamic =“true”，但当我从p：ajax标签调用更新时，它会在未选择选项卡时拉取数据。:( 我是Primefaces的新手，并且喜欢迄今为止看到的东西。这似乎不应该太困难，但是我错过了某些东西。此外，我很难找到可以帮助我的文档或示例。希望我只是在错误的地方寻找。:) 提前致谢。

- JMecham

Answer 1

简而言之，@(...) 语法将转换为一个 jQuery 选择器，该选择器应返回具有具体 id 属性的 JSF 生成的 HTML 元素。更详细的解释可以在回答这个问题时找到：PrimeFaces 选择器（例如 update="@(.myClass)"）如何工作？ 你接近了.ui-tabs-selected ，但它只指向选项卡本身（位于选项卡视图顶部的标签），而不是选定选项卡的选项卡面板（实际内容） ，其类别为.ui-tabs-panel。正确的 jQuery 选择器是这个，利用:visible伪选择器：

update="@(.ui-tabs-panel:visible)"

但是，我在这里尝试了一下，在当前PF5版本中存在呈现错误。整个<div class="ui-tabs-panel">本身被唯一的选项卡内容替换，而不是仅替换其内容。当我将选项卡的内容包装在另一个具有共同样式类的<h:panelGroup>中时，它就可以正常工作：

<p:tabView>
    <p:tab title="one">
        <h:panelGroup id="one" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
    <p:tab title="two">
        <h:panelGroup id="two" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
    <p:tab title="three">
        <h:panelGroup id="three" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
</p:tabView>

然后可以按照以下方式进行引用：

update="@(.ui-tabs-panel:visible .tab-content)"

请注意，你真的需要给那些 <h:panelGroup> 元素设置一个固定的 id，这是第一段提到的原因。

- BalusC

---

太棒了！谢谢BalusC。这正是我在寻找的。 - JMecham

BalusC，我以为这对我来说是有效的，但经过进一步测试，它并不是。有两种方式，它似乎没有按照我的预期工作。首先，每次事件触发时都会拉取数据，而不管选择了哪个4个选项卡中的哪一个。预期行为应该是仅拉取当前选定选项卡中所需的数据。其次，尽管事件本身只触发一次，但数据被多次拉取。你还有其他建议吗？ - JMecham

不。监听器只被调用一次，但是需要填充panelGroup（一个dataTable，确切地说）所需的数据被多次拉取。似乎update=导致数据被多次检索，而不是我期望的“一次”（因为只选择了一个选项卡）。此外，事件是由页面上选择的TreeNode触发的。我认为事件的来源不应该有影响，并且我认为事件运行良好。如果我指定update=":myPanelGroup"，则更新仅发生一次。当我使用上面的@()时，它会发生多次。 - JMecham

页面上有4个选项卡和一个树形结构。当选择树形结构中的节点时，它会改变页面的上下文。这意味着一个始终在视图中的区域应该被更新，同时两个位于选项卡中的表格也应该被更新，但仅当它们在当前选定的选项卡内时才更新。目前情况是，即使未选择适当的选项卡，表格也在更新。 - JMecham