GWT FlexTable用法

GWT FlexTable是一个灵活的表, 可根据需要创建单元。它可以是锯齿状的（也就是说, 每行可以包含不同数量的单元格）, 并且可以将单个单元格设置为跨越多行或多列。它与GWT GRID相似, 因为它也创建表。可以将表内的各个单元格设置为基于索引跨越多个行或列。

GWT FlexTable类声明

让我们看看com.google.gwt.user.client.ui.FlexTable的声明

public class FlexTable extends HTMLTable

GWT FlexTable嵌套类

GWT FlexTable构造函数

GWT FlexTable方法

GWT FlexTable示例1

//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;
}

输出：