0

私はウィケットクライアントを書こうとしていますが、これはステートフルなものです。表形式のデータを表示するフォームがあるので、これは頭痛の種です。ユーザーは、行が追加/削除されるたびにサーバーに Ajax リクエストを発行することなく、データに行を追加/削除できる必要があります。完全に機能するjQueryを使用して、ブラウザーに行追加機能を実装しました。問題は、これを Wicket で動作させる方法です。

私のhtmlスニペット:

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr wicket:id="voyagePlan">
      <td><input wicket:id="berth.name" type="text"/></td>
      <td><input wicket:id="berth.position.lattitude" type="text"/></td>
      <td><input wicket:id="berth.position.longitude" type="text" /></td> 
  <td><input wicket:id="arrival" type="text"/></td>
      <td><input wicket:id="departure" type="text"/></td>
      <td><button type="submit" class="btn btn-danger">Delete</button></td>
</tr>
  </tbody>
</table>

私のJavaコード:

private CompoundPropertyModel<List<Voyage>> model = new CompoundPropertyModel<>(new VoyageModel());

public MyForm(String id) {
  super(id, "MyForm");
  WebMarkupContainer modalBody = new WebMarkupContainer("modalBody", model);
  add(modalBody);

  final PropertyListView<Voyage> lv = new PropertyListView<Voyage>("voyagePlan") {
    @Override
    protected void populateItem(ListItem<Voyage> item) {
      item.add(new TextField<String>("key"));
      item.add(new TextField<String>("berth.name"));
      item.add(new TextField<String>("berth.position.lattitude"));
      item.add(new TextField<String>("berth.position.longitude"));
      item.add(new TextField<String>("arrival"));
      item.add(new TextField<String>("departure"));
    }
  };

  modalBody.add(lv);

  saveLink = new AjaxSubmitLink("save") {
    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
      shipService.saveVoyageInformation(model.getObject());
      target.add(this.getParent());
    }
  };
  add(saveLink);
}

public class VoyageModel extends LoadableDetachableModel<List<Voyage>> {
  @Override
  protected List<Voyage> load() {
    return myService.getVoyage(mmsi);
  }
}

このコードを使用すると、より具体的には、新しい行が追加されて送信されたときに List インスタンスを更新する方法が問題になりますか? 現在、既存の行に対する変更のみが更新されます。新しい行がデータベースに保存されることはありません。

ここで説明されているアプローチに従って、データを json として送信する機能を作成することを考えました: http://thewicketevangelist.blogspot.dk/2011/12/marrying-wicket-and-jquery-ajax.html。私が正しく理解していれば、これは TextField.setRequired などのフォーム入力フィールドの検証が使用できなくなったことを意味します。それは正しく理解されていますか？

入力検証などのすべての利点を備えた、通常の Wicket Web リクエスト処理に近いアプローチが必要です。

4

2 に答える 2

1

フラグメントを使えばできるはずですが、Ajax なしではできません。voyagePlan 行を表すフラグメントを作成します。PropertyListView を変更して、フラグメントを設定します。新しい Voyage オブジェクト + フラグメントを生成する AbstractDefaultAjaxBehavior を作成し、それを PropertyListView に追加し、modalBody をターゲットに追加してリストをリロードします。renderHead をオーバーライドして、AbstractDefaultAjaxBehavior をトリガーする JavaScript 関数を追加します。ユーザーが新しい行を追加する場合は、jquery でその JavaScript 関数を呼び出します。

于 2013-06-24T14:54:19.900 に答える