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

ユースケースは次のとおりです。

  • 追加ボタンを複数回押します。
  • すべての値を入力します。
  • ランダムな 1 行の削除ボタンを押します。

その後、これまでに入力されたすべての値が消え、空白が表示されます。削除ボタンを押した後、それらを入力したままにするにはどうすればよいですか?

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 に答える