Wicket: поле DropDown с флажками для множественного выбора - PullRequest
Новая
       19

Wicket: поле DropDown с флажками для множественного выбора

4 голосов
/ 13 января 2011

Мне нужно компактно представить множественное выделение внутри раскрывающегося списка в Wicket, установив флажок рядом с каждым значением в раскрывающемся списке.Я думаю об использовании ListView с CheckBox и Label в качестве компонента для DropDownChoice, но тогда я не уверен, что делать дальше.

Ответы [ 2 ]

3 голосов
/ 15 января 2011

Вы можете использовать некоторую библиотеку JavaScript, примененную к Wicket's ListMultipleChoice (которая генерирует тег HTML [select множественный = "несколько"). Я нашел один ( jQuery UI MultiSelect Widget , , размещенный на 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 голос
/ 13 января 2011

Увы, Wicket используется для генерации HTML, а в HTML нет возможности иметь выпадающий список с флажками. (В Swing или другом оконном интерфейсе это было бы возможно, и ваш подход был бы правильным.)

Посмотрите в Интернете пример кода для HTML, который может вызвать аналогичный эффект (например, <div>, который отображается / не отображается при нажатии на значение, которое вы редактируете). Например, я нашел эту тему здесь: http://www.webdeveloper.com/forum/showthread.php?t=182976

...