GWT GRID

17 Mar 2025 | 4 分钟阅读

GWT GRID 用于通过扩展 HTMLTable.Grid 来创建简单的 HTML 表格。它可以根据需要的行数和列数进行配置。

GWT Grid 类声明

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

GWT Grid 构造函数

构造函数	描述
Grid()	它是 Grid 的默认构造函数。
Grid(int rows, int columns)	它构造一个具有请求大小的网格。

GWT Grid 方法

修饰符和类型	方法	描述
boolean	clearCell(int row, int column)	它将指定单元格的内容替换为单个空格。
protected Element	createCell()	它创建一个新的空单元格。
int	getCellCount(int row)	它返回列数。
int	getColumnCount()	它获取此网格中的列数。
int	getRowCount()	它返回行数。
int	insertRow(int beforeRow)	它将新行插入到表格中。
受保护的 void	prepareCell(int row, int column)	它检查单元格是否为表格中的有效单元格。
受保护的 void	prepareColumn(int column)	它检查列索引是否有效。
受保护的 void	prepareRow(int row)	它检查行索引是否有效。
void	removeRow(int row)	它从表格中删除指定的行。
void	resize(int rows, int columns)	它调整网格的大小。
void	resizeColumns(int columns)	它将网格调整为指定的列数。
void	resizeRows(int rows)	它将网格调整为指定的行数。

GWT GRID 示例 1

//SimpleGrid1.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

public class GridExample implements EntryPoint {

  public void onModuleLoad() {
    // Grids must be sized explicitly, though they can be resized later.
    Grid g = new Grid(5, 5);

    // Put some values in the grid cells.
    for (int row = 0; row < 5; ++row) {
      for (int col = 0; col < 5; ++col)
        g.setText(row, col, "" + row + ", " + col);
    }

    // Just for good measure, let's put a button in the center.
    g.setWidget(2, 2, new Button("Does nothing, but could"));

    // You can use the CellFormatter to affect the layout of the grid's cells.
    g.getCellFormatter().setWidth(0, 2, "256px");

    RootPanel.get().add(g);
  }
}

输出

GWT GRID 示例 2

//SimpleGrid2.java

mport com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.gwtext.client.core.Connection;  
import com.gwtext.client.core.EventObject;  
import com.gwtext.client.core.TextAlign;  
import com.gwtext.client.core.UrlParam;  
import com.gwtext.client.data.*;  
import com.gwtext.client.widgets.Button;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Toolbar;  
import com.gwtext.client.widgets.ToolbarButton;  
import com.gwtext.client.widgets.event.ButtonListenerAdapter;  
import com.gwtext.client.widgets.form.ComboBox;  
import com.gwtext.client.widgets.form.DateField;  
import com.gwtext.client.widgets.form.NumberField;  
import com.gwtext.client.widgets.form.TextField;  
import com.gwtext.client.widgets.grid.*;  
import com.gwtext.client.widgets.grid.event.GridCellListenerAdapter;  
  
import java.util.Date;  
  
public class EditableGridSample implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
  
        HttpProxy proxy = new HttpProxy("data/plants.xml", Connection.GET);  
  
        final RecordDef recordDef = new RecordDef(  
                new FieldDef[]{  
                        new StringFieldDef("common"),  
                        new StringFieldDef("botanical"),  
                        new StringFieldDef("light"),  
                        new FloatFieldDef("price"),  
                        new DateFieldDef("availDate", "availability", "m/d/Y"),  
                        new BooleanFieldDef("indoor")  
                }  
        );  
  
        XmlReader reader = new XmlReader("plant", recordDef);  
        final Store store = new Store(proxy, reader);  
        store.load();  
  
        SimpleStore cbStore = new SimpleStore("lightTypes", new String[]{  
                "Shade",  
                "Mostly Shady",  
                "Sun or Shade",  
                "Mostly Sunny",  
                "Sunny"  
        });  
        cbStore.load();  
  
        final ComboBox cb = new ComboBox();  
        cb.setDisplayField("lightTypes");  
        cb.setStore(cbStore);  
  
        ColumnConfig commonCol = new ColumnConfig("Common Name", "common", 220, true, null, "common");  
        commonCol.setEditor(new GridEditor(new TextField()));  
  
        ColumnConfig lightCol = new ColumnConfig("Light", "light", 130);  
        lightCol.setEditor(new GridEditor(cb));  
  
  
        ColumnConfig priceCol = new ColumnConfig("Price", "price", 70, true);  
        priceCol.setAlign(TextAlign.RIGHT);  
        priceCol.setRenderer(new Renderer() {  
            public String render(Object value, CellMetadata cellMetadata, Record record,  
                                 int rowIndex, int colNum, Store store) {  
                return "$" + value;  
            }  
        });  
        NumberField numberField = new NumberField();  
        numberField.setAllowBlank(false);  
        numberField.setAllowNegative(false);  
        numberField.setMaxValue(1000);  
        priceCol.setEditor(new GridEditor(numberField));  
  
        ColumnConfig availableCol = new ColumnConfig("Available", "availDate", 95, true);  
  
        DateField dateField = new DateField();  
        dateField.setFormat("m/d/Y");  
        dateField.setMinValue("01/01/06");  
        dateField.setDisabledDays(new int[]{0, 6});  
        dateField.setDisabledDaysText("Plants are not available on the weekend");  
        availableCol.setEditor(new GridEditor(dateField));  
  
        ColumnConfig indoorCol = new ColumnConfig("Indoor?", "indoor", 55);  
  
        indoorCol.setRenderer(new Renderer() {  
            public String render(Object value, CellMetadata cellMetadata, Record record,  
                                 int rowIndex, int colNum, Store store) {  
                boolean checked = ((Boolean) value).booleanValue();  
                return "<img class=\"checkbox\" src=\"js/ext/resources/images/default/menu/" +  
                            (checked ? "checked.gif" : "unchecked.gif") + "\"/>";  
            }  
        });  
  
        ColumnConfig[] columnConfigs = {  
                commonCol,  
                lightCol,  
                priceCol,  
                availableCol,  
                indoorCol  
        };  
  
        ColumnModel columnModel = new ColumnModel(columnConfigs);  
        columnModel.setDefaultSortable(true);  
  
        final EditorGridPanel grid = new EditorGridPanel();  
  
        Toolbar toolbar = new Toolbar();  
        ToolbarButton button = new ToolbarButton("Add Plant", new ButtonListenerAdapter() {  
            public void onClick(Button button, EventObject e) {  
  
                Record plant = recordDef.createRecord(new Object[]{  
                            "New Plant1", "Anguinaria Canadensis", "Mostly Shady",  
                             new Float(5), "", Boolean.FALSE});  
                grid.stopEditing();  
                store.insert(0, plant);  
                grid.startEditing(0, 0);  
            }  
        });  
        toolbar.addButton(button);  
  
        grid.setStore(store);  
        grid.setColumnModel(columnModel);  
        grid.setWidth(500);  
        grid.setHeight(300);  
        grid.setAutoExpandColumn("common");  
        grid.setTitle("Editor Grid Example");  
        grid.setFrame(true);  
        grid.setClicksToEdit(1);  
        grid.setTopToolbar(toolbar);  
  
        grid.addGridCellListener(new GridCellListenerAdapter() {  
            public void onCellClick(GridPanel grid, int rowIndex, int colIndex, EventObject e) {  
                if (grid.getColumnModel().getDataIndex(colIndex).equals("indoor") &&  
                        e.getTarget(".checkbox", 1) != null) {  
                    Record record = grid.getStore().getAt(rowIndex);  
                    record.set("indoor", !record.getAsBoolean("indoor"));  
                }  
            }  
        });  
  
        store.load(new UrlParam[]{new UrlParam("rnd", new Date().getTime() + "")});  
        panel.add(grid);  
  
        RootPanel.get().add(panel);  
    }  
}

//SimpleGrid2.css

.grid {
  width: 150px;
  height: 50px;
  padding: 5px;
  position: absolute; 
  left: 220px; 
  top: 350px;  
}


.tableCell-even {
  padding: 5px;
  background: #008AB8;
  border: 1px solid #ffffff;
}

.tableCell-odd {
  padding: 5px;
  background: #FFCC33;
  border: 1px solid #ffffff;
}


.panel {
  background-color: #C3D9FF;
  border: 1px solid #000000;
  padding: 3px;
  margin: 3px;
  font-weight: normal;  
}

输出

下一主题GWT FlexTable

GWT GRID

GWT Grid 类声明

GWT Grid 构造函数

GWT Grid 方法

GWT GRID 示例 1

GWT GRID 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

GWT 教程

GWT 面板

GWT 布局面板

GWT 高级

GWT MVP

GWT 区别

面试题

GWT GRID

GWT Grid 类声明

GWT Grid 构造函数

GWT Grid 方法

GWT GRID 示例 1

GWT GRID 示例 2

相关帖子

GWT SuggestBox

GWT PopupPanel

GWT DateBox

GWT FlexTable

GWT FormPanel

GWT HTMLPanel

GWT 面板

GWT RootPanel

GWT FlowPanel

GWT DialogBox

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器