WICKET:控制更改CheckBox上组件的可见性

时间:2014-08-21 09:02:13

标签: java checkbox components wicket form-submit

我正在使用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">

反之亦然

1 个答案:

答案 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);
}

您可以向此类容器添加任意数量的组件,您可以使用它来管理它们。