代码之家 › 专栏 › 技术社区 › Aybek Kokanbekov

WICKET:控制更改时组件的可见性复选框

form-submit wicket components checkbox java

Aybek Kokanbekov · 技术社区 · 10 年前

我使用的是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 回复 | 直到 10 年前

Michael Zhavzharov 10 年前

要通过单击复选框更新任何组件可见性,可以使用“AjaxCheckBox”,例如:

//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 );

要在提交后获得checkBox值,您可以检查 checkBoxValue 价值

更新

实际上,您可以重写可隐藏的组件方法 onConfigure() 要根据“checkBoxValue”设置其可见性(这只是获取可见性的另一种方式,可能更可取):

   someComponent = new Label("someComponent", "some text")
   {
       @Override
       protected void onConfigure() {
          setVisible ( checkBoxValue ); 
       }
   };

如果你这样做,那么你可以删除 someComponent.setVisible(checkBoxValue); 代码来自 AjaxCheckBox#onUpdate() 方法

更新2

组成部分 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);

并且在 AjaxCheckBox#onUpdate() 使用ajax的方法更新容器:

protected void onUpdate(AjaxRequestTarget target) {
    //if checkbox is checked, then our component is shown
    container.setVisible(checkBoxValue);
    target.add(container);
}

在html代码中

  <div wicket:id="cont">
      <input type="text" wicket:id="someComponent"/>
  </div>

您可以向这样的容器中添加任意数量的组件,并且可以使用它来管理所有组件。