GWT CellTable组件

GWT CellTable组件介绍

CellTable组件代表一个可以分页的表格。

GWT CellTable组件声明

以下是com.google.gwt.user.client.ui.CellTable类的声明

public class CellTable<T>
   extends AbstractHasData<T>

GWT CellTable组件构造方法

构造方法	描述
CellTable()	构造一个默认页面大小为 15 的表。
CellTable(int pageSize)	构造具有给定页面大小的表。
CellTable(int pageSize, CellTable.Resources resources)	使用指定的 CellTable.BasicResources 构造具有给定页面大小的表。
CellTable(int pageSize, CellTable.Resources resources, ProvidesKey<T> keyProvider)	使用给定的页面大小、指定的 CellTable.BasicResources 和给定的密钥提供程序构造一个表。
CellTable(int pageSize, ProvidesKey<T> keyProvider)	使用给定的页面大小和给定的密钥提供程序构造一个表。
CellTable(ProvidesKey<T> keyProvider)	构造一个默认页面大小为 15 和给定密钥提供程序的表。

GWT CellTable组件方法

方法	描述
void addColumn(Column<T,?> col)	向表中添加一列。
void addColumn(Column<T,?> col, Header<?> header)	将一列添加到具有关联标题的表中。
void addColumn(Column<T,?> col, Header<?> header, Header<?> footer)	将一列添加到表中，并带有关联的页眉和页脚。
void addColumn(Column<T,?> col, SafeHtml headerHtml)	将一列添加到具有关联 SafeHtml 标题的表中。
void addColumn(Column<T,?> col, SafeHtml headerHtml, SafeHtml footerHtml)	将一列添加到表中，并带有关联的 SafeHtml 页眉和页脚。
void addColumn(Column<T,?> col, java.lang.String headerString)	向表中添加具有关联字符串标题的列。
void add Column (Column<T,?> col, java. lang. String header String, java.lang.String footer String)	向表中添加一个带有关联字符串页眉和页脚的列。
void addColumnStyleName(int index, java.lang.String styleName)	将样式名称添加到指定索引处的 TableColElement，必要时创建它。
protected Element convertToElements(SafeHtml html)	将指定的 HTML 转换为 DOM 元素并返回 DOM 元素的父元素。
protected boolean dependsOnSelection()	检查视图中的单元格是否依赖于选择状态。
protected void do Selection (Event event, T value, int row, int column)	已弃用。使用 Abstract Has Data.add Cell Preview Handler(com.google.gwt.view.client.Cell Preview Event.Handler) 代替。
int getBodyHeight()	返回表体的高度。
protected Element getChildContainer()	返回保存渲染单元格的元素。
int getHeaderHeight()	返回表格标题的高度。
protected Element getKeyboardSelectedElement()	获取具有键盘选择的元素。
TableRowElement getRowElement(int row)	获取指定行的 TableRowElement。
protected boolean isKeyboardNavigationSuppressed()	检查键盘导航是否被抑制，例如当用户编辑单元格时。
protected void onBlur()	当小部件模糊时调用。
protected void onBrowserEvent2(Event event)	在 AbstractHasData.onBrowserEvent(Event) 完成后调用。
protected void onFocus()	当小部件聚焦时调用。
void redrawFooters()	重绘表格的页脚。
void redrawHeaders()	重绘表格的标题。
void removeColumn(Column<T,?> col)	删除一列。
void removeColumn(int index)	删除一列。
void removeColumnStyleName(int index, java.lang.String styleName)	从指定索引处的 TableColElement 中删除样式。
protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)	将所有行值渲染到指定的 SafeHtmlBuilder。
protected void replaceAllChildren(java.util.List<T> values, SafeHtml html)	用指定的 html 替换所有子项。
protected boolean resetFocusOnCell()	将焦点重置在当前聚焦的单元格上。
protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)	更新元素以反映其键盘选择状态。
void setRowStyles(RowStyles<T> rowStyles)	设置用于确定行样式的对象；更改将在下次呈现表格时生效。
protected void setSelected(Element elem, boolean selected)	已弃用。AbstractHasData 永远不会调用此方法，在 renderRowValues(SafeHtmlBuilder, List, int, SelectionModel) 中渲染选定的样式

GWT CellTable组件示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='com.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改HelloWorld.css

body {
    text-align: center;
    font-family: verdana, sans-serif;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    color: #777777;
    margin: 40px 0px 70px;
    text-align: center;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>CellTable Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.client;


import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.DateCell;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.*;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.view.client.*;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class HelloWorld implements EntryPoint {
    /**
     * A simple data type that represents a contact.
     */

    private static class Contact {
        private final String address;
        private final Date birthday;
        private final String name;

        public Contact(String name, Date birthday, String address) {
            this.name = name;
            this.birthday = birthday;
            this.address = address;
        }
    }

    /**
     * The list of data to display.
     */

    private static final List<Contact> CONTACTS = Arrays.asList(
            new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue"),
            new Contact("Joe", new Date(85, 2, 22), "22 Lance Ln"),
            new Contact("George",new Date(46, 6, 6),"1600 Pennsylvania Avenue"));

    public void onModuleLoad() {
        // Create a CellTable.
        CellTable<Contact> table = new CellTable<Contact>();
        table.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.ENABLED);

        // Add a text column to show the name.
        TextColumn<Contact> nameColumn =
                new TextColumn<Contact>() {
                    @Override
                    public String getValue(Contact object) {
                        return object.name;
                    }
                };
        table.addColumn(nameColumn, "Name");

        // Add a date column to show the birthday.
        DateCell dateCell = new DateCell();
        Column<Contact, Date> dateColumn
                = new Column<Contact, Date>(dateCell) {
            @Override
            public Date getValue(Contact object) {
                return object.birthday;
            }
        };
        table.addColumn(dateColumn, "Birthday");

        // Add a text column to show the address.
        TextColumn<Contact> addressColumn
                = new TextColumn<Contact>() {
            @Override
            public String getValue(Contact object) {
                return object.address;
            }
        };
        table.addColumn(addressColumn, "Address");

        // Add a selection model to handle user selection.
        final SingleSelectionModel<Contact> selectionModel
                = new SingleSelectionModel<Contact>();
        table.setSelectionModel(selectionModel);
        selectionModel.addSelectionChangeHandler(
                new SelectionChangeEvent.Handler() {
                    public void onSelectionChange(SelectionChangeEvent event) {
                        Contact selected = selectionModel.getSelectedObject();
                        if (selected != null) {
                            Window.alert("You selected: " + selected.name);
                        }
                    }
                });

        // Set the total row count. This isn't strictly necessary,
        // but it affects paging calculations, so its good habit to
        // keep the row count up to date.
        table.setRowCount(CONTACTS.size(), true);

        // Push the data into the widget.
        table.setRowData(0, CONTACTS);

        VerticalPanel panel = new VerticalPanel();
        panel.setBorderWidth(1);
        panel.setWidth("400");
        panel.add(table);

        // Add the widgets to the root panel.
        RootPanel.get().add(panel);
    }
}

运行应用程序，显示结果如下：

GWT CellList组件 GWT CellBrowser组件

GWT CellTable组件

GWT CellTable组件 介绍

GWT CellTable组件 声明

GWT CellTable组件 构造方法

GWT CellTable组件 方法

GWT CellTable组件 示例

1）修改HelloWorld.gwt.xml

2）修改HelloWorld.css

3）修改HelloWorld.html

4）HelloWorld.java

微信关注

GWT CellTable组件介绍

GWT CellTable组件声明

GWT CellTable组件构造方法

GWT CellTable组件方法

GWT CellTable组件示例