Question

有没有办法向CellTable或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。你应该修改它。

向DataGrid添加下拉列表或切换按钮

1 个答案: