如何在 PrimeFaces 5.0 中使用 tabView 获取动态选项卡名称和数据？答案

【问题标题】：How to get dynamic tab names and data using tabView in PrimeFaces 5.0?如何在 PrimeFaces 5.0 中使用 tabView 获取动态选项卡名称和数据？
【发布时间】：2016-05-18 21:17:14
【问题描述】：

我需要动态显示选项卡名称。然后，每个选项卡都有自己的数据列表。例如如果选项卡名称为“学生”，当用户单击“学生”选项卡时，它将显示学生列表。如果单击“教师”选项卡，它将显示教师列表。我指的是使用下面的链接的 PrimeFaces 示例。 http://www.primefaces.org/showcase/ui/panel/tabView.xhtml

我尝试使用数据模型和 Ajax 事件示例，但无法显示所需的数据。事件不适用于数据模型。

我尝试了以下方法，

<p:tabView value="#{myBean.tabList}" var="tabItem">
    <p:tab title="#{tabItem.tabTitle}">
        <h:outputText value="#{tabItem.valueA}"/>

    </p:tab>
</p:tabView>

如果我使用这种方法，数据是动态的，但不是我想要的方式。我的数据就像选项卡名称是一个列表，每个选项卡的数据是另一个列表。

TabView tabView = new TabView();
Tab newTab = new Tab();            
newTab.setTitle("Tab Title");  

Tab newTab2 = new Tab();            
newTab2.setTitle("Tab Title2");     
tabView.getChildren().add(newTab2);

有人可以帮忙吗？

更新

我现在可以通过从支持 bean 创建 PrimeFaces 代码来根据需要显示动态数据。 TabView 位于 <p:dialog> 框内。

out1 = new SelectBooleanCheckbox();
out1.setValue(obj.isTabViewCheckBox());
out2 = new HtmlOutputLabel();
out2.setValue(obj.getTaskName());

我面临新问题。提交后我无法获取 SelectBooleanCheckbox 值。 XHTML 代码：

<p:dialog header="#{BB.projNo}" widgetVar="addData" modal="true" showEffect="explode" hideEffect="explode" styleClass="editProjects">
<h:panelGrid id="TaskAdd">
    <f:facet name="header">
        <h:outputText value="Tasks"/>
    </f:facet>
    <p:tabView id="tabView" binding="#{BB.tabView}">
    </p:tabView>
</h:panelGrid>
<p:commandButton id="saveBtn" action="#{BB.addTask}" value="Save"  style="align:center;" styleClass="buttonStyle" onstart="showLoadImg();" oncomplete="hideLoadImg();PF('addData').hide();add();" >
</p:commandButton>
</p:dialog>

提交时如何获取选中项的值？

【问题讨论】：

标签： jsf jsf-2 primefaces

【解决方案1】：

你可以使用 jstl forEach 标签

<p:tabView id="myTabView">
    <c:forEach var="tab" items="#{myBean.tabs}">
                    <p:tab title="#{tab.title}">
                        <ui:include src="#{tab.url}" />
                    </p:tab>
                </c:forEach>
</p:tabView>

在你的 myBean 中 构建要迭代的列表

List<MyTabObject> tabs = new ArrayList<MyTabObject>();
tabs.add(new MyTabObject("Tab Title", "/path/to/contentFile.xhtml"));

MyTabObject

    public class MyTabObject {
        private String title;
        private String url;

        public MyTabObject() {

        }

        public MyTabObject(String title, String url) {
            this.title = title;
            this.url = url;
        }
     }

【讨论】：

【解决方案2】：

我想办法在提交后获取复选框值。由于我有 2 个列表，一个用于选项卡名称，另一个用于选项卡数据，因此我必须遍历这两个列表。

tabView.getChildren().get(index).getChildren().get(0).getChildren().get(indexTwo+1).getAttributes().get("value").toString();

我必须引用从 managedBean 生成的每个子元素，这些子元素最初用于生成复选框组件。

【讨论】：

【解决方案3】：

您还可以使用<p:tabView> 的value 属性来动态生成选项卡。

<p:tabView
   id="mytabView"
   value="#{bean.objectList}"
   var="item">

   <p:tab title="#{item.name}">
   ...content...
   </p:tab>
</p:tabView>

【讨论】：

如何在中绑定另一个列表？