jsf - 如何在单击命令按钮时创建多个 jsf 数据表

Question

根据我的要求，我必须通过单击按钮在 ui 中创建多个空白数据表。用户可以在点击时不断添加更多表格。根据我的理解，我可以添加一个数据表并可以迭代集合，但如何添加更多。

<h:commandButton immediate="true"  styleClass="search_btn" value="Search" >
        <f:ajax listener="#{relationBean.searchRelation}" event="click"  />
    </h:commandButton>
    <h:commandButton   immediate="true" value="Add Value">
<f:ajax listener="#{relationBean.addTable}" execute="relationId"  event="click" />
</h:commandButton>
<div class="clear">&nbsp;</div>

<h:dataTable rendered="#{relationBean.flagForDatatable}" value="#    {relationBean.elementRelationList}" var="element">
<h:column>
 <f:facet name="header"> Relation Type Name</f:facet>
 <h:outputText value="#{element.relationType}" />
 </h:column>
 <h:column>
 <f:facet name="header"> Value</f:facet>
 <h:inputText value="#{element.relationForm}" />
 </h:column>
 <h:column>
 <f:facet name="header">language</f:facet>
 <h:outputText value="#{element.languageCode.languageName}" />
 </h:column>
 <h:column>
 <f:facet name="header"> Delete</f:facet>
 <h:commandButton  value="Delete" />
 </h:column>

 </h:dataTable>

Answer 1

您可以只使用<ui:repeat>迭代集合并多次呈现相同的 JSF 组件结构。

<ui:repeat value="#{bean.datatables}" var="datatable">
    <h:dataTable value="#{datatable.value}" var="item">
        ...
    </h:dataTable>
</ui:repeat>

在命令按钮中，只需将新项目添加到 . 后面的集合中即可#{bean.datatables}。

Answer 2

Belwo 是应用逻辑

<h:inputText id="relationId" class="relationship" value="#{relationBean.relationName}" required="true" requiredMessage="Enter relation">
<f:ajax></f:ajax>
</h:inputText> </div>

<h:commandButton  styleClass="search_btn" >
        <f:ajax listener="#{relationBean.searchRelation}" event="click"     render="addBtn"  execute="@all"/>
    </h:commandButton>
    <h:messages id="msgGlobal" globalOnly="true"/>
    <h:commandButton id="addBtn" disabled="#{relationBean.showButton}" class="addvalue" value="Add Value">
<f:ajax listener="#{relationBean.addValue}" render="r"  event="click" />
</h:commandButton>
<div class="clear">&nbsp;</div>
<h:panelGroup  id="r" >
<c:forEach id="repeat" items="#{relationBean.datatables}" var="">
<h:dataTable id="datatable"  value="#{relationBean.languageDTOList}" var="lang">
<h:column>
    <f:facet name="header"> Relation Type Name</f:facet>
    <h:outputText value="#{relationBean.relationName}" />
</h:column>
<h:column>
    <f:facet name="header"> Value</f:facet>
    <h:inputText />
</h:column>
<h:column>
    <f:facet name="header">language</f:facet>
    <h:outputText value="#{lang.languageName}" />
</h:column>
<h:column>
    <f:facet name="header"> Delete</f:facet>

    <h:commandButton  styleClass="remove_icon" value="Delete" >
    </h:commandButton>

</h:column>