GWT网格用法

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

GWT网格类别声明

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

public class Grid extends HTMLTable

GWT网格构造器

GWT网格方法

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

输出：