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

2

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

这当然可以使用 Wicket 来完成，但使用任何服务器端 Web 框架都不容易，因为客户端表示必须与服务器端 Java 组件保持同步。正如您已经提到的，将 JSON 发送到服务器的 JQuery 方法在某种程度上绕过了 Wicket 功能，并且您必须重新编写 Wicket 通常已经为您完成的一些事情。

在我看来，您有以下选择：

  • 您可以使用 Wicket 编写您自己的“动态表单”组件，该组件已在您的代码片段中开始。您将不得不解决几个问题，例如您已经偶然发现的问题：如何更新 Wicket List 组件（也许我的博客文章会对此有所帮助：http: //tom.hombergs.de/2013/03/advanced-wicket-动态列表视图-within.html）。

  • 您可以使用 Wicked Forms ( http://wicked-forms.org )，这是我目前正在开发的一个库，用于使用 Wicket 创建动态表单。它尚未发布，但您可以自担风险使用它（或者您可以查看源代码并自己构建）。项目主页上有一个展示功能的展示柜。看看它是否符合您的要求。

于 2013-06-21T17:20:52.890 回答
1

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

于 2013-06-24T14:54:19.900 回答