0

我有一个动态表单，我在 Wicket 中编写了一些表单，这些表单通过“单击此处添加更多问题”类型的按钮进行复制。我编写了一个非常基本的（我还是 Wicket 的新手）AJAXy 侦听器，该侦听器主要工作，但我不知道如何删除甚至隐藏我的 ListView 中的项目。

这让我想知道，有没有办法让一些 JS 复制表单字段？在我使用 Wicket 组件重新构建表单之前，我让 Jquery Dynamic Form Plugin 复制了这些值。这很好用并且很容易理解（一个重要的优点）。但是，如果我只是使用插件而不是类似的东西，我无法弄清楚这将如何影响 Wicket

    //Issue box magic
    final MarkupContainer rowPanel = new WebMarkupContainer("issuesPanel");
    rowPanel.setOutputMarkupId(true);
    form.add(rowPanel);
    ArrayList numIssues = new ArrayList();
    numIssues.add(new Object());
    numIssues.add(new Object());
    numIssues.add(new Object());
    final ListView lv = new ListView("issuesBox", numIssues) {
        @Override
        protected void populateItem(ListItem item) {
            int index = item.getIndex() + 1;

            item.add(new DropDownChoice("issues", combinedIssues));
            item.add(new TextField<String>("note"));
        }
    };
    lv.setReuseItems(true);
    rowPanel.add(lv);
    form.add(new AjaxSubmitLink("addIssue", form) {
        @Override
        public void onSubmit(AjaxRequestTarget target, Form form) {
            lv.getModelObject().add(new Object());
            if (target != null)
                target.add(rowPanel);
        }
    }.setDefaultFormProcessing(false));
    form.add(new AjaxSubmitLink("removeIssue", form) {
        @Override
        public void onSubmit(AjaxRequestTarget target, Form form) {
            //Wicket gets very angry when you remove components, so just hide it (recommended way)
            if (target != null) {
                Component lastObject = (Component)lv.get(lv.getList().size() - 1);
                lastObject.setVisible(false);
                log.debug("Components " + lv.get );
            }

        }
    }.setDefaultFormProcessing(false));

JQuery 插件更容易使用，但我如何告诉 Wicket 字段比它想象的要多？

请注意，我还试图避免 AJAX 调用只是为了添加一个新问题，在我使用该应用程序的淤泥中可能会成为一个问题。

有什么建议么？

4

2 回答 2

3

您不能只通过 ajax 在 html 中添加表单元素。使用 Wicket，您可以在 html 和 Java 中拥有一个 compenent 树，并且两者都必须匹配。最后，当您提交表单时，Wicket 必须知道如何处理这些值。

不确定我是否理解您的特定要求，但我想类似的问题可能是为一个人添加地址。在这里，我将构建一个 AdressEditPanel，其中包含一个表单，其中包含一个地址所需的所有字段。该面板将有一个 PersonAdress（作为示例）对象作为模型。

在 Person 上，您将拥有一个地址集合并使用 ListView 来呈现和编辑每个地址。在 ListView 的 populateItem() 函数中，您可以将 AdressEditPanel 的一个实例添加到项目中。

如果您需要为某人添加地址，只需将一个条目添加到地址集合并重新显示表单（我会首先使用 Ajax，一旦它工作，只需进行切换到 ajax 所需的最小更改）。

希望有帮助

于 2012-09-11T19:08:53.660 回答
0

如果您在修改其模型对象后在 ListView 上调用 removeAll() ，您应该解决您的问题。例如

new AjaxSubmitLink("addIssue", form) {
        @Override
        public void onSubmit(AjaxRequestTarget target, Form form) {
            lv.getModelObject().add(new Object());
            lv.removeAll();
            if (target != null)
                target.add(rowPanel);
        }

但是我不知道这是否会导致表单验证出现问题，但我认为它应该是安全的。

更新

如果您想应用相同的技术来删除链接，您应该编写如下内容：

new AjaxSubmitLink("removeIssue", form) {
        @Override
        public void onSubmit(AjaxRequestTarget target, Form form) {

            if (target != null) {
                lv.getModelObject().remove(lv.getList().size() - 1);
                lv.removeAll();
                target.add(rowPanel);

            }

        }
    }

但是，如果没有 AJAX，这是不可能的。唯一的方法是使用 JS 并在服务器端读取来自表单的请求参数。

于 2012-09-11T18:29:06.207 回答