1

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

<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());
    }
}

用例如下：

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

之后，到目前为止填充的所有值都会消失并显示为空白。按下删除按钮后如何保持它们充满？

4

1 回答 1

1

这是因为您在删除按钮 ajax 更新整个表单而不处理新提交的输入值。immediate="true"on ajax 侦听器跳过所有未设置的输入组件的处理immediate="true"。您需要删除该属性。缺少属性将导致默认情况下execute仅处理当前组件 ( )。@this您需要明确指定@form.

因此，只需执行与添加按钮相同的操作即可。替换immediate="true"为execute="@form"。

<f:ajax listener="#{bean.onButtonRemoveFieldClick(field)}" execute="@form" render="@form" />
于 2013-09-13T13:55:38.773 回答