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

以下是应用的逻辑

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

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

2 个答案: