动态输入字段（值）在删除项目字段时重置

Question

我有一个动态可扩展的表，有一个添加和删除按钮。

<h:form>
        <h:dataTable id="tblFields" value="#{bean.fields}" var="field">
            <h:column>
                <h:inputText value="#{field.value}" />
            </h:column>

            <h:column>
                <h:inputText value="#{field.value2}" />
            </h:column>
            <h:column>
                <h:inputText value="#{field.value3}" />
            </h:column>


            <h:column>
                <h:commandButton value="Remove">
                    <f:ajax listener="#{bean.onButtonRemoveFieldClick(field)}" immediate="true" render="@form" /> 
                </h:commandButton>
            </h:column>
        </h:dataTable>

        <h:commandButton value="Add">
            <f:ajax listener="#{bean.onButtonAddFieldClick}" execute="@form" render="tblFields" /> 
        </h:commandButton>
    </h:form>

这是相关的支持Bean。

@Named
@ViewScoped
public class Bean {

    private List<Field> fields;

    @PostConstruct
    public void init() {
        fields = new ArrayList();

        fields.add(new Field());
    }

    public List<Field> getFields() {
        return fields;
    }

    public void setFields(List<Field> fields) {
        this.fields = fields;
    }

    public void onButtonRemoveFieldClick(Field field) {
        fields.remove(field);
    }

    public void onButtonAddFieldClick() {
        fields.add(new Field());
    }
}

用例如下：

• 多次按下添加按钮
• 填写所有的值。
• 随机按一行的删除按钮。

之后，到目前为止填写的所有数值都消失了，显示为空白。如何在按下删除按钮后继续填写？

Answer 1

这是因为你在删除按钮ajax-更新整个表格，而没有处理新提交的输入值。该 immediate="true" 在ajax监听器上 箕斗 所有输入组件的处理，包括 不 有 immediate="true" 设置。你需要删除attribtue。没有 execute 属性将只导致当前组件(@this)进行处理。您需要明确指定 @form.

因此，只要做同样的添加按钮。替换 immediate="true" 由 execute="@form".

<f:ajax listener="#{bean.onButtonRemoveFieldClick(field)}" execute="@form" render="@form" />