Question

我目前正在使用Vaadin开发应用。我的工作场景是将chcekbox的数量放入组合框中。这个场景对JQuery UI非常有用。很遗憾，我找不到任何方法让它适用于vaadin ..

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

先谢谢:)

Answer 1

您似乎尝试开发多选ComboBox。很遗憾，无法在CheckBox内添加ComboBox es之类的任何组件。

如果您需要多种选择，也许可以使用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

2 个答案: