Wicket：帶有複選框的DropDown框，用於多選

我需要在下拉框中的每個值旁邊都有一個複選框，以在Wicket的下拉框內緊湊地呈現多選。我正在考慮使用帶CheckBox和Label的ListView作爲DropDownChoice的組件，但我不確定如何繼續下去。Wicket：帶有複選框的DropDown框，用於多選

來源

2011-01-13 user496547

Alas Wicket用於生成HTML，並且在HTML中沒有設施可以使用複選框進行下拉菜單。（在Swing或其他窗口化UI中，這將是可能的，並且您的方法將是正確的）。

請看一下互聯網上的HTML代碼示例，它可能會導致類似的效果（例如，<div>顯示/當你點擊你正在編輯的值時不顯示）。例如，我發現這個線程在這裏：http://www.webdeveloper.com/forum/showthread.php?t=182976

來源

2011-01-13 20:47:13

你可以使用一些JavaScript庫，適用於Wicket的ListMultipleChoice（產生一個[選擇多個=「多」] HTML標籤，我發現一個（jQuery UI MultiSelect Widget，hosted at GitHub）實現。一個jQuery插件，效果很好，感謝@erichynds！

Page class只是一個老舊的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>

來源

2011-01-15 00:24:57 tetsuo

Wicket：帶有複選框的DropDown框，用於多選

回答

相關問題