如何将复选框放入 vaadin 的 Combobox

Question

我目前正在使用 Vaadin 开发应用程序。我的工作场景是将多个 chcekbox 放入组合框中。这种情况与 JQuery UI 配合得很好。不幸的是我找不到任何方法让它在 vaadin 上工作..

所以请给我一些想法或资源

提前致谢:)

Answer 1

看来你要开发多selectComboBox。不幸的是，无法在 ComboBox.

中添加任何组件，例如 CheckBoxes

如果您需要多个 selection，也许您可以使用 Grid 或 Table 等组件。

Answer 2

我认为无法在 ComboBox 中添加复选框。如果您需要使用 Javascript，您可以使用 GWT Widget 或 JavaScript 组件，以及组件和 UI 扩展。

请参阅下面我的代码，它非常简单 vaadin javascript 组件：

@JavaScript({ "theme://javascript/jquery/jquery-2.1.4.min.js", 
          "theme://javascript/chosen/chosen.jquery.js"})
@StyleSheet("theme://javascript/chosen/chosen.css")
public clas VChosenComponent extends VerticalLayout {

    private String id;
    public List<String> values;
    public List<String> selectedValues;

    private String onChangeDynamicFunction;  // Use to passing javascript value to java code

    public VChosenComponent(List<Integer> values) {
       this.values = values;
    }

    @Override
    public void attach() {
        super.attach();
        try {
            id = "chosen-" + getConnectorId();
            onChangeDynamicFunction = VChosenComponent.class.getCanonicalName() + getConnectorId();

            StringBuffer  divHTML = new StringBuffer();
            divHTML.append("<");
            divHTML.append("select data-placeholder=\"Choose a Country...\" style=\"width:350px;\" tabindex=\"1\"> ");
            divHTML.append("    <option value=\"\"></option> ");
            for(String value : values) {
              divHTML.append("  <option value=\"" + value + "\">" + value + "</option> ");
            }
            divHTML.append("</select>");

            Label html = new Label(divHTML.toString(), ContentMode.HTML);
            html.setHeight(100, Unit.PERCENTAGE);
            html.setWidth(100, Unit.PERCENTAGE);

            removeAllComponents();
            addComponent(html);

            StringBuffer  jsScript = new StringBuffer();
            jsScript.append("function() {");
            jsScript.append("   $('#" + id + "').chosen({no_results_text: \"Oops, nothing found!\"});");
            jsScript.append("   $('#" + id + "').chosen().change(function(){ ");
            jsScript.append("       " + dynamicFunction + "($(this).val());");
            jsScript.append("   });");
            jsScript.append("}");

            JavaScript javascript = JavaScript.getCurrent(); 
            javascript.addFunction(dynamicFunction, new JavaScriptFunction() {
                    private static final long serialVersionUID = 3013252366773470787L;
                    @Override
                    public void call(JsonArray arguments) {
                        String value = arguments.getString(0);

                // Corrrect here for your real work
                selectedValue.add(value);
            }
           });

                javascript.execute("setTimeout(" + jsScript.toString() + ", 1)");

        } catch (Throwable t) {
                 setVisible(false);
        }
    }

  public List<String> getSelectedValues() {
    return this.selectedValue;
  }
}

希望对您有所帮助:)

如何将复选框放入 vaadin 的 Combobox

How put checkboxs into Combobox in vaadin

checkbox

combobox

jquery-ui

vaadin