GWT FlexTable用法

GWT FlexTable是一个灵活的表, 可根据需要创建单元。它可以是锯齿状的(也就是说, 每行可以包含不同数量的单元格), 并且可以将单个单元格设置为跨越多行或多列。它与GWT GRID相似, 因为它也创建表。可以将表内的各个单元格设置为基于索引跨越多个行或列。
GWT FlexTable类声明
让我们看看com.google.gwt.user.client.ui.FlexTable的声明

public class FlexTable extends HTMLTable

GWT FlexTable嵌套类
描述
FlexTable.FlexCellFormatter 它是HTMLTable.CellFormatter的特定实现。
GWT FlexTable构造函数
修饰符和类型 建设者 描述
public FlexTable() 它是空FlexTable的构造函数。
GWT 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) 它从表中删除指定的行。
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用法

文章图片
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用法】输出:
GWT FlexTable用法

文章图片

    推荐阅读