gwt - 向 DataGrid 添加下拉或切换按钮

Question

有没有办法将下拉按钮或切换按钮添加到CellTableor DataGrid？

该文档仅演示了使用常规按钮 ( ButtonCell)。

Answer 1

要将 ToggleButton 添加到网格中，我发现的唯一方法是将按钮放在另一个面板（如 FlowPanel）中，然后将此面板添加到网格中。

要找到这种类型的按钮，您可以访问 gwt 的展示：

http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCustomButton

这是我的代码，让您的按钮位于 FlowPanel 中：

RootLayoutPanel rp = RootLayoutPanel.get();
FlowPanel togglePanel = new FlowPanel();
ToggleButton toggle = new ToggleButton("Coucou");
toggle.setWidth("100px");
togglePanel.add(toggle);
rp.add(togglePanel);

CSS：

.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled,
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
  margin: 0;
  text-decoration: none;
  background: url("images/hborder.png") repeat-x 0px -27px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled {
  padding: 3px 5px 3px 5px;
}

.gwt-ToggleButton-up {
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-up-hovering {
  border: 1px solid;
  border-color: #939393;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-up-disabled {
  border: 1px solid #bbb;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}

.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
  padding: 4px 4px 2px 6px;
}

.gwt-ToggleButton-down {
  background-position: 0 -513px;
  border: 1px inset #666;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-down-hovering {
  background-position: 0 -513px;
  border: 1px inset;
  border-color: #9cf #69e #69e #7af;
  cursor: pointer;
  cursor: hand;
}

.gwt-ToggleButton-down-disabled {
  background-position: 0 -513px;
  border: 1px inset #ccc;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}

这是我在展示中采用的基本 CSS。你应该修改它。