Question

我正在尝试在GXT 3中使用选项和类别进行ComboBox。

我可以使用ComboBoxCell为选项和类别设置不同的显示。

问题：我需要无法选择类别（例如HTML标记<optgroup>）。

这是一个普通的旧HTML组合框（<select> tag）

HTML CODE：

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <select>
      <optgroup label="category 1">
        <option name="option1">Option 1</option>
        <option name="option2">Option 2</option>
        <option name="option3">Option 3</option>
      </optgroup>
      <optgroup label="category 2">
        <option name="option4">Option 4</option>
        <option name="option5">Option 5</option>
        <option name="option6">Option 6</option>
      </optgroup>
    </select>
  </body>
</html>

正如您在this fiddle上看到的那样，它会生成一个包含不可选择类别的ComboBox。我正在尝试使用GXT进行等效操作。

有什么想法吗？

编辑：

我终于完成了自己的实施：

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.UIObject;
import com.google.gwt.user.client.ui.Widget;

import java.util.Collection;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;

public class Select<T>  extends Widget {

  private static final String TAG_OPTGROUP = "optgroup";
  private static final String ATTR_NAME = "name";
  private static final String PROPERTY_SELECTED = "selected";

  private Element select;
  private Map<Element, T> mapElement;

  public Select(boolean multiple){
    this.mapElement=new HashMap<Element, T>();
    this.select = DOM.createSelect(multiple);
    this.setElement(this.select);
  }

  public Select(){
    this(false);
  }

  public OptGroup addGroup(String displayName){
    OptGroup optGroup=new OptGroup(displayName);
    this.select.appendChild(optGroup.getElement());
    return optGroup;
  }

  public void addOption(T t,String displayName){
    Element option=DOM.createOption();
    option.setAttribute(ATTR_NAME,t.toString());
    option.setInnerText(displayName);
    this.select.appendChild(option);
    this.mapElement.put(option,t);
  }

  public T getSelectedValue(){
    for(Map.Entry<Element,T> entry:mapElement.entrySet()){
      if(entry.getKey().getPropertyBoolean(PROPERTY_SELECTED)){
        return entry.getValue();
      }
    }
    return null;
  }

  public Collection<T> getSelectedValues(){
    Collection<T> result=new HashSet<T>();
    for(Map.Entry<Element,T> entry: mapElement.entrySet()){
      if(entry.getKey().getPropertyBoolean(PROPERTY_SELECTED)){
        result.add(entry.getValue());
      }
    }
    return result;
  }

  public class OptGroup extends UIObject {
    private static final String ATTR_LABEL="label";

    private String name;
    private Element element;

    private OptGroup(String name) {
      this.name = name;
      this.element = DOM.createElement(TAG_OPTGROUP);
      this.element.setAttribute(ATTR_LABEL,name);
      this.setElement(this.element);
    }

    public String getName() {
      return name;
    }

    public void addOption(T t,String displayName){
      Element option=DOM.createOption();
      option.setAttribute(ATTR_NAME,t.toString());
      option.setInnerText(displayName);
      this.element.appendChild(option);
      mapElement.put(option,t);
    }
  }
}

这是可以完善的，因为我使用toString()作为name标记的属性<option>，但它符合我的需要;）

Answer 1

我认为gwt列表框不支持optgroup。您将不得不使用DOM API。这样的事情可以做到

List<String> options = new ArrayList<String>();
options.add("Option 1");
options.add("Option 2");
options.add("Option 3");

ListBox combo = new ListBox();
SelectElement selectElm = combo.getElement().cast();
OptGroupElement groupElement =Document.get().createOptGroupElement();
groupElement.setLabel("category 1");

for (String option : options) 
{
    OptionElement optElement = Document.get().createOptionElement();
    optElement.setInnerText(option.getName());
    groupElement.appendChild(optElement);
}

selectElm.appendChild(groupElement);

Answer 2

在GWT中，您可以按照here

所述进行操作

GXT Combobox具有不可选择的类别

2 个答案: