GWT FlexTable是一个灵活的表, 可根据需要创建单元。它可以是锯齿状的（也就是说, 每行可以包含不同数量的单元格）, 并且可以将单个单元格设置为跨越多行或多列。它与GWT GRID相似, 因为它也创建表。可以将表内的各个单元格设置为基于索引跨越多个行或列。
GWT FlexTable类声明
让我们看看com.google.gwt.user.client.ui.FlexTable的声明
public class FlexTable extends HTMLTableGWT FlexTable嵌套类
| 类 | 描述 |
|---|---|
| FlexTable.FlexCellFormatter | 它是HTMLTable.CellFormatter的特定实现。 |
| 修饰符和类型 | 建设者 | 描述 |
|---|---|---|
| public | FlexTable() | 它是空FlexTable的构造函数。 |
| 修饰符和类型 | 方法 | 描述 |
|---|---|---|
| void | addCell(int row) | 它将单元格附加到指定的行。 |
| int | getCellCount(int row) | 它获取给定行上的单元格数。 |
| FlexTable.FlexCellFormatter | getFlexCellFormatter() | 它获取FlexTable.FlexCellFormatter。 |
| int | getRowCount() | 它获取行数 |
| void | insertCell(int beforeRow, int beforeColumn ) | 它将一个单元格插入FlexTable。 |
| int | insertRow(int beforeRow) | 它将一行插入FlexTable。 |
| 受保护的空白 | prepareCell(int row, int column) | 它确保该单元存在。 |
| 受保护的空白 | prepareRow(int row) | 它确保该行存在。 |
| void | removeAllRows() | 它删除表中的所有行。 |
| void | removeCell(int row, int col) | 它从表中删除指定的单元格。 |
| void | removeCells(int row, int col, int num) | 它从表的一行中删除许多单元格。 |
| void | removeRow(int row) | 它从表中删除指定的行。 |
//SampleFlexTable1.java
public class FlexTableExample implements EntryPoint {public void onModuleLoad() {
// Tables have no explicit size -- they resize automatically on demand.
FlexTable t = new FlexTable();
// Put some text at the table's extremes.This forces the table to be
// 3 by 3.
t.setText(0, 0, "upper-left corner");
t.setText(2, 2, "bottom-right corner");
// Let's put a button in the middle...
t.setWidget(1, 0, new Button("Button 00"));
t.setWidget(1, 0, new Button("Button 01"));
t.setWidget(2, 0, new Checkbox("Chechbox 10"));
t.setWidget(2, 0, new Checkbox("Chechbox 11"));
// ...and set it's column span so that it takes up the whole row.
t.getFlexCellFormatter().setColSpan(1, 0, 3);
RootPanel.get().add(t);
}
}//SampleFlexTable1.css
.flexTable {
width: 150px;
height: 150px;
position: absolute;
left: 15px;
top: 350px;
}.panel {
background-color: #C3D9FF;
border: 1px solid #000000;
padding: 3px;
margin: 3px;
font-weight: normal;
}输出：
文章图片
GWT FlexTable示例2
//SampleFlexTable2.java
package com.srcmini.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ScrollListener;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.RootPanel;
public class GWTClient implements EntryPoint{
public void onModuleLoad() {
FlexTable flexTable = new FlexTable();
flexTable.setWidget(0, 0, new Label("0, 0"));
flexTable.setWidget(0, 1, new Label("FlexTable"));
flexTable.setWidget(0, 2, new Label("0, 2"));
flexTable.setWidget(1, 0, new Label("1, 0"));
flexTable.setWidget(1, 1, new Label("1, 1"));
flexTable.setWidget(1, 2, new Label("1, 2"));
flexTable.setWidget(2, 0, new Label("2, 0"));
flexTable.setWidget(2, 1, new Label("2, 1"));
flexTable.setWidget(2, 2, new Label("2, 2"));
flexTable.setWidget(3, 0, new Label("3, 0 - span columns"));
flexTable.setStyleName("panel flexTable");
flexTable.getFlexCellFormatter().setColSpan(3, 0, 3);
for (int i = 0;
i <
flexTable.getRowCount();
i++) {
for (int j = 0;
j <
flexTable.getCellCount(i);
j++) {
if ((j % 2) == 0) {
flexTable.getFlexCellFormatter()
.setStyleName(i, j, "tableCell-even");
} else {
flexTable.getFlexCellFormatter()
.setStyleName(i, j, "tableCell-odd");
}
}
}
RootPanel.get().add(flexTable);
}
}//SampleFlexTable2.css
.FlexTable {
border-top: thin solid #444444;
border-left: thin solid #444444;
border-right: thin solid #111111;
border-bottom: thin solid #111111;
background-color:#505050;
}.FlexTable-OddRow {
background-color: #cccccc;
}.FlexTable-EvenRow {
background-color:#505050;
}.FlexTable-ColumnLabel {
color: white;
padding: 3px;
}.FlexTable-ColumnLabelCell {
border-width: 0 0 1px 0;
border-style: solid;
border-color: white;
margin: 0;
padding: 0;
text-align: center;
}.FlexTable-Cell {
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: white;
padding: 5px;
}【GWT FlexTable用法】输出：
文章图片
