GWT - CellTable 组件

上一页
下一页

介绍

CellTable 组件表示一个支持分页和列的表格视图。

类声明

以下是com.google.gwt.user.cellview.client.CellTable<T>类的声明：

public class CellTable<T>
   extends AbstractHasData<T>

类构造函数

序号 构造函数 & 描述
1

CellTable()

创建一个默认页面大小为 15 的表格。
2

CellTable(int pageSize)

创建一个指定页面大小的表格。
3

CellTable(int pageSize, CellTable.Resources resources)

使用指定的 CellTable.BasicResources 创建一个指定页面大小的表格。
4

CellTable(int pageSize, CellTable.Resources resources, ProvidesKey<T> keyProvider)

使用指定的页面大小、CellTable.BasicResources 和给定的键提供程序创建一个表格。
5

CellTable(int pageSize, ProvidesKey<T> keyProvider)

使用指定的页面大小和给定的键提供程序创建一个表格。
6

CellTable(ProvidesKey<T> keyProvider)

创建一个默认页面大小为 15，并使用给定键提供程序的表格。

类方法

序号 函数名称 & 描述
1

void addColumn(Column<T,?> col)

向表格添加一列。
2

void addColumn(Column<T,?> col, Header<?> header)

向表格添加一列，并关联一个表头。
3

void addColumn(Column<T,?> col, Header<?> header, Header<?> footer)

向表格添加一列，并关联一个表头和表尾。
4

void addColumn(Column<T,?> col, SafeHtml headerHtml)

向表格添加一列，并关联一个 SafeHtml 表头。
5

void addColumn(Column<T,?> col, SafeHtml headerHtml, SafeHtml footerHtml)

向表格添加一列，并关联一个 SafeHtml 表头和表尾。
6

void addColumn(Column<T,?> col, java.lang.String headerString)

向表格添加一列，并关联一个 String 表头。
7

void add Column (Column<T,?> col, java. lang. String header String, java.lang.String footer String)

向表格添加一列，并关联一个 String 表头和表尾。
8

void addColumnStyleName(int index, java.lang.String styleName)

向指定索引处的 TableColElement 添加样式名称，如果需要则创建它。
9

protected Element convertToElements(SafeHtml html)

将指定的 HTML 转换为 DOM 元素并返回 DOM 元素的父元素。
10

protected boolean dependsOnSelection()

检查视图中的单元格是否依赖于选择状态。
11

protected void do Selection (Event event, T value, int row, int column)

已弃用。请改用 AbstractHasData.addCellPreviewHandler(com.google.gwt.view.client.CellPreviewEvent.Handler) 。
12

int getBodyHeight()

返回表格正文的高度。
13

protected Element getChildContainer()

返回保存已渲染单元格的元素。
14

int getHeaderHeight()

返回表格表头的高度。
15

protected Element getKeyboardSelectedElement()

获取具有键盘选择的元素。
16

TableRowElement getRowElement(int row)

获取指定行的 TableRowElement。
17

protected boolean isKeyboardNavigationSuppressed()

检查键盘导航是否被抑制，例如当用户正在编辑单元格时。
18

protected void onBlur()

当小部件失去焦点时调用。
19

protected void onBrowserEvent2(Event event)

在 AbstractHasData.onBrowserEvent(Event) 完成后调用。
20

protected void onFocus()

当小部件获得焦点时调用。
21

void redrawFooters()

重绘表格的表尾。
22

void redrawHeaders()

重绘表格的表头。
23

void removeColumn(Column<T,?> col)

移除一列。
24

void removeColumn(int index)

移除一列。
25

void removeColumnStyleName(int index, java.lang.String styleName)

移除指定索引处的 TableColElement 的样式。
26

protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)

将所有行值渲染到指定的 SafeHtmlBuilder 中。
27

protected void replaceAllChildren(java.util.List<T> values, SafeHtml html)

用指定的 html 替换所有子元素。
28

protected boolean resetFocusOnCell()

重置当前焦点单元格的焦点。
29

protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)

更新元素以反映其键盘选择状态。
30

void setRowStyles(RowStyles<T> rowStyles)

设置用于确定如何设置行样式的对象；更改将在下次渲染表格时生效。
31

protected void setSelected(Element elem, boolean selected)

已弃用。此方法从未被 AbstractHasData 调用，请在 renderRowValues(SafeHtmlBuilder, List, int, SelectionModel) 中渲染选定样式。

继承的方法

此类继承自以下类的方法：

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.cellview.client.AbstractHasData

  • java.lang.Object

CellTable 组件示例

此示例将引导您完成简单的步骤，以演示如何在 GWT 中使用 CellTable 组件。按照以下步骤更新我们在GWT - 创建应用章节中创建的 GWT 应用程序：

步骤 描述
1 创建一个名为HelloWorld的项目，放在com.tutorialspoint包下，如GWT - 创建应用章节中所述。
2 修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。其余文件保持不变。
3 编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符src/com.tutorialspoint/HelloWorld.gwt.xml的内容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

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

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改后的样式表文件war/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;
}

以下是修改后的 HTML 宿主文件war/HelloWorld.html的内容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>CellTable Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

让我们来看一下 Java 文件src/com.tutorialspoint/HelloWorld.java的内容，它将演示 CellTable 组件的使用。

package com.tutorialspoint.client;

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

import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client
.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;

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(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 - 创建应用章节中一样，在开发模式下编译并运行应用程序。如果应用程序一切正常，将产生以下结果：

GWT CellTable Widget
gwt_complex_widgets.htm
打印页面
上一页
下一页
广告
© . All rights reserved.