Wicket: DropDown box with checkboxes for multiple selection
I need to compactly present multi-selection inside a drop-down box in Wicket by having a check box next to each value in the drop down box. I'm thinking of using ListView with开发者_如何转开发 CheckBox and Label as a component for DropDownChoice but then I am not sure how to proceed further.
You can use some javascript library applied to Wicket's ListMultipleChoice (which generates a [select multiple="multiple"] HTML tag. I've found one (jQuery UI MultiSelect Widget, hosted at GitHub) implemented as a jQuery plugin, which works very well. Thanks to @erichynds!
The Page class is just a plain-old Wicket page, and all you have to do is to import the scripts/stylesheets, and call a single function (highly configurable):
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>
Alas Wicket is used to generate HTML, and in HTML there is no facility to have a drop-down with checkboxes. (In Swing or another Windowing UI, this would be possible, and your approach would be correct.)
Take a look on the internet for example code for HTML which can cause a similar effect (e.g. a <div> which is shown / not shown when you click on the value you're editing). For example I found this thread here: http://www.webdeveloper.com/forum/showthread.php?t=182976
加载中,请稍侯......
精彩评论