在 JSF 中动态添加新行

Question

我有以下代码允许用户输入一些数据：

<h:panelGrid columns="2" cellspacing="5">
    <h:outputLabel value="#{msg.FrequencyOfSpending}" />

    <h:selectOneMenu id="ruleFrequencyOptions" value="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
        <f:selectItems value="#{Rule.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
        <f:ajax event="valueChange" listener="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
    </h:selectOneMenu>
</h:panelGrid>

<h:panelGroup id="rulesGroup">
    <a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">

        <h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">

        <h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
            <a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}"  onerror="handleAjaxError" />
        </h:selectBooleanCheckbox>

        <h:outputText value="#{msg[RuleParamProperty.name]}" />

        <h:panelGrid columns="3">
            <h:outputText value="#{msg.Action_1}" />
            <h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />   
            <h:outputText value="#{msg.Action_3}" />
        </h:panelGrid>

        <h:inputText value="#{RuleParamProperty.inputValue}" />

        </h:panelGrid>

    </a4j:repeat>
</h:panelGroup>

<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
    <img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
    <h:link value="#{msg.addControl}" />
</h:panelGrid>

我需要添加一个链接以允许他们添加此数据的不同变体，即用户单击添加新控制链接并出现一个新行，允许他们输入更多数据（格式完全相同）。他们应该能够添加多行相同的数据。

使用 JSF2 和 Richfaces4 处理此问题的最佳方法是什么？ 我应该将 panelGroups 放在一个表格中吗？

谢谢

Answer 1

我使用了 Luiggi 建议的数据表：

<h:dataTable value="#{rule}" var="currentRuleItem">

    <h:column>

        <h:panelGrid columns="2" cellspacing="5">
            <h:outputLabel value="#{msg.FrequencyOfSpending}" />

            <h:selectOneMenu id="ruleFrequencyOptions" value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect">
            <f:selectItems value="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" />
            <f:ajax event="valueChange" listener="#{currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" />
            </h:selectOneMenu>
        </h:panelGrid>

        <h:panelGroup id="rulesGroup">
            <a4j:repeat value="#{currentRuleItem.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator">

            <h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput">

            <h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true">
                <a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}"  onerror="handleAjaxError" />
            </h:selectBooleanCheckbox>

            <h:outputText value="#{msg[RuleParamProperty.name]}" />

            <h:panelGrid columns="3">
                <h:outputText value="#{msg.Action_1}" />
                <h:outputText value="#{msg[currentRuleItem.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" />   
                <h:outputText value="#{msg.Action_3}" />
            </h:panelGrid>

            <h:inputText value="#{RuleParamProperty.inputValue}" />

            </h:panelGrid>

            </a4j:repeat>
        </h:panelGroup>

    </h:column>

</h:dataTable>

<!--******* Link here to generate row with exact same format as all code above ***-->
<h:panelGrid columns="2">
    <img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" />
    <h:commandLink value="#{msg.addControl}" action="#{myBean.addRule}" />
</h:panelGrid>


// my bean method
public void addRule()
{   
    iRuleSet.get("RuleControl1").add(createRule());     
}