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.