Question

我想动态地向表单添加一些TextField并隐藏或显示一些onClick。

我想把它作为图像实现（它实际上是德语，所以我解释一下）：在左侧有一周的日子（星期一，星期二，......，星期日）。如果你单击箭头指向正确方向的按钮，则应该隐藏实际周并显示下一周。

我存储了代表一个周期的Integer。所以如果在数据库中是3，我需要能够在“下周”按钮上单击3次。（注意：此数字可以动态更改）。所以，如果我将数字3改为5，我需要5次这个表格。

我希望我把它描述为“O.k”，我的英语不是最好的。对不起。

menu image

我读过的内容：首先我需要一个面板，我添加TextFields，其次我需要一个ListView，它获取一个面板列表。但我不知道这是如何工作的......这是正确的方法吗？

FormPanel中：

public class FoodFieldPanel extends Panel {

public FoodFieldPanel(String id) {
    super(id);
    WebMarkupContainer foodFields = new WebMarkupContainer("foodFields");
    TextField monday = new TextField("monday");
    TextField tuesday = new TextField("tuesday");
    TextField wendnesday = new TextField("wendnesday");
    TextField thursday = new TextField("thursday");
    TextField friday = new TextField("friday");
    TextField saturday = new TextField("saturday");
    TextField sunday = new TextField("sunday");
    foodFields.add(monday);
    foodFields.add(tuesday);
    foodFields.add(wendnesday);
    foodFields.add(thursday);
    foodFields.add(friday);
    foodFields.add(saturday);
    foodFields.add(sunday);
    add(foodFields);
} 
}

页：

public class FoodDetailPanel extends Panel {

public FoodDetailPanel(String id, final IModel<Category> catModel, boolean fieldsEnabled) {
    super(id, catModel);
    setOutputMarkupId(true);
    int cycle = 4;
    List<FoodFieldPanel> textFields = new ArrayList<FoodFieldPanel>();
    for (int a = 1; a <= cycle; a++) {
        textFields.add(new FoodFieldPanel("foodField"));
    }
    add(new ListView("test", textFields) {
        protected void populateItem(ListItem item) {
            FoodFieldPanel test = (FoodFieldPanel) item.getModelObject();
            add(test);
        }
    });
}
}

MarkupForPage：

<wicket:panel xmlns:wicket="http://wicket.apache.org">
<span wicket:id="test">
    <div wicket:id="foodField">

    </div>
</span> 
</wicket:panel>

作为第一步，我想尽可能多地创建面板..

Answer 1

因此，鉴于您的显示器是静态的，只有其背后的数据必须改变，您可以利用模型的强大功能。（我不能发布一个完整的解决方案，它会太长，但希望它能告诉你一般的想法。）

class WeekData {
   private String monday;
   private String tuesday;
   // and so on
}

class AllData {
  private final int minWeek;
  private final int maxWeek;
  private int currentWeek; // this is modified by clicking the arrows

  private Map<Integer, WeekData> weekMap;

  public IModel<WeekData> createDataModel() {
    return new IModel<WeekData>() {
       public WeekData getObject() {
         return weekMap.get( currentWeek );
       }
    }
  }

  public IModel<Integer> createWeekModel() {
    return new IModel<Integer>() {

       public Integer getObject() {
         return currentWeek;
       }
    }
  }

}

您的FoodFieldPanel初始化将如下所示：

public FoodFieldPanel(String id, IModel<AllData> model) {
  super(id);
  WebMarkupContainer foodFields = new WebMarkupContainer("foodFields", new CompoundPropertyModel( model.getObject().createDataModel() ) );
  TextField monday = new TextField("monday");
  TextField tuesday = new TextField("tuesday");
  //...
  foodFields.add(monday);
  foodFields.add(tuesday);
  //
  add(foodFields);
}

您还需要以类似的方式更改箭头的代码，但基本思路是通过使用动态模型，您可以替换页面后面的数据，而无需显示代码甚至了解逻辑。而且您不需要额外的ListView。（虽然我会在ListView中亲自存储一周中的日子，但我不想进一步使我的答案复杂化。）

这种显示和模型的分离是Wicket最强大的功能之一，it's worth learning as much about them as you can。

Wicket：动态添加TextField / Panel

1 个答案: