Question

我正在尝试编写一个wicket客户端，这是一些有状态的。这给了我一些头疼，因为我有一个表格呈现一些表格数据。用户必须能够向数据添加/删除行，而不是每次添加/删除行时都向服务器发出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请求处理的方法，具有输入验证等所有优点。

Answer 1

如果我理解正确，你想要的是创建一个动态表单，“动态”意味着表单的结构在运行时被定义并可能被更改。

当然可以使用Wicket完成，但是对于任何服务器端Web框架都不容易，因为客户端表示必须与服务器端Java组件保持同步。正如你已经提到的那样，将JSON发送到服务器的JQuery方法有点绕过Wicket功能，你必须重新编写Wicket通常已经为你做的一些事情。

我认为，您有以下选择：

您可以使用Wicket编写自己的“动态表单”组件，该组件已在代码段中开始。您必须解决几个问题，例如您已经偶然发现的问题：如何更新您的Wicket List组件（也许我的博客文章将对此有所帮助：http://tom.hombergs.de/2013/03/advanced-wicket-dynamic-listview-within.html）。
您可以使用Wicked Forms（http://wicked-forms.org）这是我正在开发的库，可以使用Wicket创建动态表单。它尚未发布，但您可以自担风险使用它（或者您可以查看源代码并构建自己的代码）。项目主页上有一个展示功能的展示。看看它是否符合您的要求。

Answer 2

你应该能够用片段来做，但不能没有Ajax。创建表示voyagePlan行的片段。更改PropertyListView以填充片段。创建一个AbstractDefaultAjaxBehavior，生成一个新的Voyage对象+片段，将其添加到PropertyListView并将modalBody添加到目标以重新加载列表。覆盖renderHead以添加触发AbstractDefaultAjaxBehavior的javascripts函数当用户想要添加新行时，让jquery调用javascript函数。

如何将状态浏览器创建表格数据与Wicket Web应用程序相结合？

2 个答案: