Primefaces 环形项目在放入 tabView 时会相互叠加答案

【问题标题】：Primefaces ring items are superposed on each other when placed into a tabViewPrimefaces 环形项目在放入 tabView 时会相互叠加
【发布时间】：2014-08-17 10:33:11
【问题描述】：

我有一个 xhtml 页面，我在其中放置了一个 <p:tabView>，其中包含 3 个 <p:tab>。

在每个<p:tab> 中我都有一个<p:ring>。像这样：

<p:tabView>
    <p:tab id="tab1">
       <p:ring/>
    </p:tab>

    <p:tab id="tab2">
       <p:ring/>
    </p:tab>

    <p:tab id="tab3">
       <p:ring/>
    </p:tab>
</p:tabView>

第一个选项卡 (tab1) 的环显示正常。但是对于其他 2 个选项卡（tab2 和 tab3 的环），环项显示在另一个之上。只有当我点击它的一些项目时，才会检索到原始配置。

他是异常显示的截图：

和普通的（当我点击一个项目时获得）：

与tabView结合的环有问题还是我遗漏了什么？

**编辑：** 这是我的xhtml页面的代码（实际上是一个标签的代码）：

<p:tab id="tabExec" title="Exécutable">
                    <p:growl id="displayE" showDetail="true" />

                    <h:form id="formDev">
                        <h:panelGrid columns="2">

                            <h:outputText value="Nom de l'exécutable: *" />

                            <p:inputText value="#{developerController.nomLivrable}"
                                label="Nom du livrable" required="true" />


                            <h:outputText value="Exécutable: *" />

                            <h:panelGroup layout="block">
                                <p:fileUpload fileUploadListener="#{ftpFileUpload.upload}"
                                    description="Sélectionnez un fichier"
                                    update=":BigTabView:displayE :BigTabView:formDev:outFileNameE"
                                    style="margin-right: 20px;" required="true" label="Exécutable" />

                                <h:outputText id="outFileNameE"
                                    value="#{ftpFileUpload.getFileName()}" />
                            </h:panelGroup>

                            <h:panelGroup layout="block">
                                <p:commandButton value="Valider"
                                    actionListener="#{developerController.storeFile(developerController.nomLivrable)}"
                                    update=":BigTabView:displayE :BigTabView:formDevs:historiqueDevsRing"
                                    style="margin-right: 5px;" />
                                <p:commandButton value="Annuler" type="reset" />
                            </h:panelGroup>
                        </h:panelGrid>
                    </h:form>

                    <h:form id="formDevs">
                        <p:ring id="historiqueDevsRing"
                            value="#{developerController.executableList}" var="exec">

                            <p:graphicImage value="#{resource['images/exe.png']}"
                                height="100px" />
                            <p:commandLink value="#{exec.nomlivrable}"
                                actionListener="#{developerController.connectToFtpServer()}"
                                oncomplete="window.open('ftp://#{exec.emplacementlivrable}'); return false;"
                                update=":BigTabView:displayE">
                            </p:commandLink>

                        </p:ring>
                    </h:form>
                </p:tab>

【问题讨论】：

没人知道这个问题吗？

标签： jsf primefaces xhtml tabview

【解决方案1】：

问题在于p:ring 使用absolute 位置这一事实。为了防止这种行为（不是定位，“堆叠”环），您需要在添加表单之后实现tabChange 事件处理程序，如下所示：

<body>
  <p:tabView>
    <p:ajax event="tabChange" listener="#{bean.onTabChange}"/>
    <p:tab id="tab1">
      <h:form>
        <p:ring value="#{bean.list}" var="st">
          <p:outputLabel value="1#{st}"/>
        </p:ring>
      </h:form>
    </p:tab>
    <p:tab id="tab2">
      <h:form>
        <p:ring value="#{bean.list}" var="st">
          <p:outputLabel value="2#{st}"/>
        </p:ring>
      </h:form>
    </p:tab>
    <p:tab id="tab3">
      <h:form>
        <p:ring value="#{bean.list}" var="st">
          <p:outputLabel value="3#{st}"/>
        </p:ring>
      </h:form>
    </p:tab>            
  </p:tabView>
</body>

在你的 managedBean 中：

@ManagedBean(name="bean")
public class BeanView implements Serializable {

  private static final long serialVersionUID = 1775631010811130942L;
  private List<String> list; 

  @PostConstruct
  public void init() {
    list = new ArrayList<String>();
    list.add("a");
    list.add("b");
    list.add("c");
    list.add("d");
    list.add("e");
  }

  public void onTabChange(TabChangeEvent event){
    Tab selected = event.getTab();
    for (UIComponent comp : selected.getChildren())
      if (comp instanceof HtmlForm)
        for (UIComponent comp2 : comp.getChildren())
          if (comp2 instanceof Ring){
            //first solution, primefaces update
            RequestContext.getCurrentInstance().update(comp2.getClientId());
            //second solution, jquery click
            FacesContext faces = FacesContext.getCurrentInstance();
            String separator = UINamingContainer.getSeparatorChar(faces) + "";
            String usingId = comp2.getClientId().replaceAll(separator, "\\\\\\\\" + separator);
            RequestContext.getCurrentInstance().execute("$('#" + usingId + " li').last().click();");

          }   
  }

  public List<String> getList() {
    return list;
  }

此示例有效，并且每次选项卡更改时都会更新环，答案基于 OP 所做的评论。

但是，这会将您的 p:ring 带入默认状态。例如，如果我的戒指包含 5 个值：

                        data0 data1 data2 data3 data4

环上显示的第一项是data0。如果我选择 data3，更改选项卡，重新打开带有环的相同选项卡，然后将显示 data0。为了防止这种行为，您需要在 managedBean 中实现一个选择（f:setPropertyActionListener 是您最好的选择）。

【讨论】：

感谢您的回复。我已经理解并实施了您的解决方案，但它不起作用。当我调试时，我可以看到条件 comp instanceof Ring 永远不会为真......即使是带有环的选项卡
可能是因为p:ring 总是在表单中？
我已经修改了 onTabChange 方法来更深入地搜索像 public void onTabChange(TabChangeEvent event) { Tab selected = event.getTab(); for (UIComponent comp : selected.getChildren()) if (comp instanceof HtmlForm) for (UIComponent compR : comp.getChildren()) { if (compR instanceof Ring) { RequestContext.getCurrentInstance().update(compR.getClientId()); } } } 这样的环并且知道它找到了环组件但它仍然不起作用（环仍然“堆叠”）
你是在告诉我你在一个表格里，一个标签里有一个环吗？
您的评论确实使它起作用...我已经粘贴了一个示例来说明这一点。