在一个项目,页面经常要显示和隐藏一些控件,用wicket来控制显示和隐藏控件相当的方便。
1、最简单的隐藏和显示方法:
wicket的控件大部分都有setVisible(...)方法,用这个方法就可以隐藏和显示大部分的控件。
如
addEntSpNumPanel.setVisible(true);//显示 showSpNumUsePanel.setVisible(false);//隐藏
如果要点击某个控件的同时隐藏这个控件本身,可以这样做:
Button addSpNumButton = new Button("addSpNum") { @Override public void onSubmit() { addEntSpNumPanel.setVisible(true); showSpNumUsePanel.setVisible(false); this.setVisible(false);//隐藏控件本身 } };
2、通过ajax方式隐藏控件
这个可以说wicket一个做的不大好的地方。通过ajax方式隐藏控件要分两种情况分析。
(1)隐藏单一控件:
如果只是要隐藏一个控件,就比较容易做,比如,通过下拉框的ajax方式隐藏一个下拉框控件:
actTypeChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") { @Override protected void onUpdate(AjaxRequestTarget target) { dataGroupChoice.setVisible(true); target.addComponent(dataGroupChoice); } });
actTypeChoice是一个下拉框控件,当控件的值改变时,触发onUpdate(..)事件。在这里也要注意,target.addComponent(dataGroupChoice)中的控件dataGroupChoice必须设置一个属性才能正常隐藏显示,否则会报异常。属性如下:
dataGroupChoice.setOutputMarkupId(true);
(2)隐藏一个以上的控件
如果你要隐藏一个以上的控件,比如要隐藏一个表格,那么就最好把这个表格放在一个WebMarkupContainer里面,这样隐藏的时候只要控制这个WebMarkupContainer控件就可以了。看例子:
<span wicket:id="addEntSpNumPar"> <span wicket:id="addEntSpNum"> <table cellspacing="0" cellpadding="0" width="100%"> <tr> <th align="right" style="width: 60px;">测试: </th> <td style="width: 60%"> <input type="text" wicket:id="spNum"/> </td> </tr> <tr> <th align="right" style="width: 60px;">测试2: </th> <td style="width: 60%"> <input type="text" wicket:id="spNum2"/> </td> </tr> </table> </span> </span>
WebMarkupContainer addEntSpNumPanelPar = new WebMarkupContainer("addEntSpNumPar"); WebMarkupContainer addEntSpNumPanel = new WebMarkupContainer("addEntSpNum"); addEntSpNumPanel.setOutputMarkupId(true); addEntSpNumPanelPar.add(addEntSpNumPanel); TextField spNumText = new TextField("spNum", new Model()); addEntSpNumPanel.add(spNumText); TextField spNumText2 = new TextField("spNum2", new Model()); addEntSpNumPanel.add(spNumText2);
改变事件:
actTypeChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") { @Override protected void onUpdate(AjaxRequestTarget target) { addEntSpNumPanel.setVisible(false); target.addComponent(addEntSpNumPanelPar); } });