我正在使用wicket框架。
有没有人知道如何通过单击checkBox组件来控制表单中组件的可见性,以及如何在提交表单时获取复选框状态的布尔值(true或false,具体取决于是否检查)。
我想做这样的事情:
TextField nameField = new TextField("name");
public StateDB() {
final AjaxCheckBox searchByFio = new AjaxCheckBox("searchByFio", new PropertyModel(this, "checkBoxValue")) {
@Override
protected void onUpdate(AjaxRequestTarget target) {
nameField.setVisible(checkBoxValue);
target.add(nameField);
}
};
Form form = new Form("form");
nameField.setOutputMarkupPlaceholderTag ( true );
form.add(nameField);
add(form);
}
但结果不是我所期待的。它只是像这样改变html元素 来自:
<input type="text" wicket:id="lastName" id="lastName" required="" value="" name="lastName">
到:
<input id="lastName" style="display:none">
反之亦然
答案 0 :(得分:8)
要通过复选框点击更新任何组件可见性,您可以使用&#39; AjaxCheckBox&#39;,例如:
//somewhere in the class create model variable:
boolean checkBoxValue = true;
//this is your hideable component
Label someComponent;
...
//and add PropertyModel for checkbox:
AjaxCheckBox checkBox = new AjaxCheckBox("checkBox", new PropertyModel(this, "checkBoxValue")) {
@Override
protected void onUpdate(AjaxRequestTarget target) {
//if checkbox is checked, then our component is shown
someComponent.setVisible(checkBoxValue);
target.add(someComponent);
}
};
...
//this is your component to update
someComponent = new Label("someComponent", "some text");
//this method allows you to hide/show component with ajax updates.
someComponent.setOutputMarkupPlaceholderTag ( true );
要在提交后获取复选框值,您可以检查checkBoxValue
值。
<强>更新强>
实际上,您可以根据&#39; checkBoxValue&#39 (这只是获得这个的另一种方式,可能更优选):
onConfigure()
如果你喜欢这样,那么你可以从 someComponent = new Label("someComponent", "some text")
{
@Override
protected void onConfigure() {
setVisible ( checkBoxValue );
}
};
方法中删除someComponent.setVisible(checkBoxValue);
代码
更新2
组件AjaxCheckBox#onUpdate()
允许您包装一些组件。当它隐藏时 - 那么它们实际上是从标记中删除的。但无论如何,容器的标记将以样式WebMarkupContainer
存在。
在某处创建容器,如:
display:hidden
将容器添加到表单:
WebMarkupContainer container = new WebMarkupContainer ( "cont" );
//we will hide this container, so we can replace someComponent.setOutputMarkupPlaceholderTag ( true ); by this
container.setOutputMarkupPlaceholderTag ( true );
将我们的form.add(container);
添加到此容器中:
someComponent
在container.add(someComponent);
方法更新容器中使用ajax:
AjaxCheckBox#onUpdate()
在html代码中,这就像
protected void onUpdate(AjaxRequestTarget target) {
//if checkbox is checked, then our component is shown
container.setVisible(checkBoxValue);
target.add(container);
}
您可以向此类容器添加任意数量的组件,您可以使用它来管理它们。