0

我正在尝试在 GXT 3 中使用选项和类别做一个 ComboBox。

我可以使用 aComboBoxCell为选项和类别提供不同的显示。

问题：我需要不可选择的类别（如 HTML 标签<optgroup>）。

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

HTML 代码：

<!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>

正如您在这个 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>

4

2 回答 2

2

我认为 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);
于 2013-06-26T13:33:39.763 回答
1

在 GWT 中，您可以按照此处所述进行操作

于 2013-06-26T13:36:48.097 回答