Question

我有一个xhtml页面，其中我放了一个包含3 <p:tabView>的{{1}}。

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

<p:ring>

第一个标签（tab1）的铃声正常显示..但对于另外两个（tab2和tab3的铃声），铃声项目会一个显示在另一个上。只有当我点击其中的一些项目时才会检索原始处置。

他是异常显示的屏幕截图：

abnormal display

和正常的（当我点击一个项目时获得）： normal display

戒指中是否存在与tabView相结合的问题，或者我遗漏了什么？

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

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

Answer 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是您最好的选择）。

当放入tabView时，Primefaces环项目相互叠加

1 个答案: