Wicket:DropDown框,带有用于多选的复选框

时间:2011-01-13 20:31:01

标签: html combobox wicket checkbox

我需要通过在下拉框中的每个值旁边的复选框紧凑地在Wicket的下拉框中显示多项选择。我正在考虑将ListView与CheckBox和Label一起用作DropDownChoice的组件,但后来我不确定如何继续进行。

2 个答案:

答案 0 :(得分:3)

您可以使用一些javascript库应用于Wicket的ListMultipleChoice(生成[select multiple =“multiple”] HTML标记。我发现一个(jQuery UI MultiSelect Widgethosted at GitHub)实现为jQuery插件,效果很好。感谢@erichynds

Page类只是一个普通的Wicket页面,您所要做的就是导入脚本/样式表,并调用单个函数(高度可配置):

<强> HomePage.java:

public class HomePage extends WebPage {

    List<String> selection = new ArrayList<String>();

    public HomePage() {
        add(CSSPackageResource.getHeaderContribution(HomePage.class, "jquery.multiselect.css"));
        add(JavascriptPackageResource.getHeaderContribution(HomePage.class, "jquery.multiselect.min.js"));

        add(new FeedbackPanel("feedback"));
        Form form = new Form("form") {
            @Override
            protected void onSubmit() {
                info(selection.toString());
            }
        };
        form.add(new ListMultipleChoice("list",
            new PropertyModel(this, "selection"),
            Arrays.asList("A", "B", "C", "D", "E", "F", "G", "H")));
        add(form);
    }
}

<强> HomePage.html

<html xmlns:wicket="http://wicket.apache.org">
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/cupertino/jquery-ui.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("select").multiselect();
    });
  </script>
</head>
<body>
  <div wicket:id="feedback"></div>
  <form wicket:id="form">
    <select wicket:id="list"></select>
    <br/>
    <input type="submit">
  </form>
</body>
</html>

答案 1 :(得分:1)

Alas Wicket用于生成HTML,而在HTML中,没有工具可以使用复选框下拉列表。 (在Swing或其他Windowing UI中,这是可能的,并且您的方法是正确的。)

在互联网上查看HTML的示例代码可能会产生类似的效果(例如,当您单击要编辑的值时显示/未显示的<div>。例如,我在这里找到了这个帖子:http://www.webdeveloper.com/forum/showthread.php?t=182976