Wicket动态添加组件以形成 [英] Wicket dynamically add components to form

问题描述

我无法动态地向表单添加组件。我要做的是：
给用户一个下拉列表，其中包含他可以选择的项目，如姓名，年龄，......

I'm having trouble adding components to a form dynamically. What I'm trying to do is: Give the user a drop-down list with items he can choose like name, age, ...

用户按下add：在1个组件中有一个（标签+输入框），允许他输入值。您可能认为我可以隐藏未选择的组件，但用户也可以在下拉列表中添加值。

When a user presses add: there comes a (label + inputbox) in 1 component wich allows him to put in the value. You might think I could hide those components wich aren't selected but the user is also able to add values to the drop-down list.

问题我有没有如何添加和删除组件（标签+输入框）而没有wicket：HTML中的ID？

这是我想要添加的内容：

This is what I'm trying to add:

<wicket:panel>
  <div wicket:id="hldValue">
    <label wicket:id="lblValue"></label>
    <input type="text" wicket:id="value"/>
  </div>
</wicket:panel>

我在这里遇到的问题是ID始终是我想要动态命名的值。使用动态HTML创建这个组件是个好主意吗？我正在重写 getMarkupResourceStream 和 getCacheKey 来实现这一目标。我仍觉得这不是正确的方法。还有其他任何建议吗？

The problem I have here is that the ID is always the value I want to name dynamically. Is using dynamic HTML to create this component a good idea? I'm overriding getMarkupResourceStream and getCacheKey to achieve this. Still I feel this is not the right way. Any other suggestions?

推荐答案

你需要一个ListView，因为你可以没有面板类型，你添加逻辑的模型listview，至少有2个表单，一个用于DropDown，用户选择数据太多，最后另一个用于提交整个ListView的数据。您可以使用AJAX但是可选

You need a ListView because you can n have type of panels , a model where you add the logic with the listview, at least 2 forms , one for the DropDown where the user select the data too add and finally another to submit the data for entire ListView. You could use AJAX but is optional

以了解如何使用中继器（ListView是高级中继器）和表单组件，您可以检查这里了解他的基本用法，这里用于表单组件的使用，最后是 here 以了解如何在AJAX中使用它。

in order to know how to use repeaters(the ListView is a advanced repeater) with form components you can check here to know his basic usage, here for his usage with form components and finally here to know how to use it with AJAX.

BTW我有一个例子，这里只是代码的关键部分。

BTW i have a example, here is just the critical part of the code.

这是ListView.class上的populateItem方法

this is populateItem method on ListView.class

 @Override
 protected void populateItem(ListItem<ListViewModel> item) {     
     item.add(new TextField<Integer>("quantity", new PropertyModel<Integer>(item.getDefaultModelObject(),
     "averageQuantity"));
     item.add(new TextField<Integer>("position", new PropertyModel<Integer>(item.getDefaultModelObject(), "order"))
     .add(new IntegerValidator()));
     item.add(new Label("description", item.getModelObject().getName()));
     item.setOutputMarkupId(true);
 }

在其他地方你应该将下拉列表添加到他自己的表单然后提交例如，操作listView对象

in other place you should add the dropdown to his own form and then on submit manipulate the listView object for example

 // I use a AjaxButton to perform the user submit if you don't 
 // want use it, you should reload the entire page
 @Override
 protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
     //redraw the parent of the list view 
     target.add(theContainerOfTheListView);
     //the submited model of the dropdown
     ListViewModel item = form.getObject();                
     List<ListViewModel> list = listViewObject.getObject();
     list.add(item);
     //you could sort the list object in order to sort the listViewObject
 }

UPDATE：在将新项目添加到列表视图之前，您应该提交列表视图的表单组件，如果您不这样做，您将松开用户更改

UPDATE: before add the new item to the listview you should submit the form components of the list view, if you don´t do it you going to loose the user changes

这篇关于Wicket动态添加组件以形成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！