資料表

建立一份資料表格,其中的列對應於資料記錄,直欄對應於欄位或種類。 特性包括分頁控制、標頭和標底,以及列選項和動作的支援。

設計時的元件

「資料表」元件拖放至頁面:
「資料表」元件按鈕

設計時頁面上的「資料表」元件:
設計時的「資料表」

執行時期的元件

執行時期頁面上的「資料表」元件:
執行時期的「資料表」

「內容及所有屬性」視圖

元件的「內容」視圖會顯示您可以用來設定元件的最常用屬性集,而且針對不同的元件,您也會看到新增控制項、動作或其他元件的選項。若要開啟「內容」視圖,請按一下「視窗 > 顯示視圖 > 內容」;然而依預設會開啟該視圖。

「資料表」元件的這些共同屬性會顯示在「內容」視圖中的 h:dataTable顯示選項橫列動作標籤上。請參閱所有資料表屬性 表格,以取得完整的屬性清單。其他用來新增動作及變更表格顯示和導覽的配置選項位於 h:dataTable>顯示選項h:dataTable>橫列動作標籤上:

表 1. 「資料表」配置選項

配置選項

說明

新增按一下某一列時要執行的動作

可讓您建立在按一下橫列時,所要發生的執行時期動作。

新增一個編輯直欄,以啟動表單來就地編輯行列內容。

可讓您提供執行時期的列內編輯作業。

新增高階分頁器

新增一個元件至標底區域,這個元件可使用箭頭在頁面之間移動。

新增移至分頁器

新增一個元件至標底區域,讓您從下拉清單中選取一個頁面。

新增頁面資訊

新增一個元件至標底區域,這個元件在頁面上顯示統計資料。

新增選項直欄至表格中

可讓您新增直欄及與表格內容相關的選項。

新增用來對標頭操作選項的動作

可讓您建立用來操作標頭資訊的動作。

新增簡易分頁器

新增一個元件至標底,這個元件會建立一個簡易的下拉功能表,以用來移至下一頁。

新增 Web 樣式分頁器

新增每一個頁碼至標底區域,讓使用者可以按一下想要的頁面。

分類>新增直欄以將表格列分類

分類>移除直欄以將表格列分類

新增含有橫列分類元件的直欄,您可以在其中設定表格排序值,以及新增圖示或文字至直欄。新增好之後,「分類」圖示會變成「移除」。

直欄

在表格中新增或移除直欄元件。您可以針對每個直欄來設定標籤、寬度及 ID,並且在表格中移動。

顯示標底

勾選這個方框會將標底區域 f:facet(標底)h:panelBox 插入資料表中,以便之後移入其他元件。

顯示標頭

勾選這個方框會將標頭區域 f:facet(標頭)h:panelBox 插入資料表中,以便之後移入其他元件。

按一下來建立/編輯自訂驗證程式碼

切換至「快速編輯」視圖,以便為各種使用者起始的事件輸入 Script 或程式碼片段。

「所有屬性」視圖會顯示您可以在元件上設定之所有屬性的表格,包括您可以從「內容」視圖來存取的那些屬性。若要切換至「所有屬性」視圖,請按一下「內容」視圖右上角的「所有屬性」圖示 「所有屬性」圖示

表 2. 所有資料表屬性

屬性名稱

顯示在「內容」視圖中的排列依據

說明

bgcolor

背景顏色

以 6 位數的十六進位 RGB 值來指定背景顏色,並且以 # 符號作為開頭,或者輸入顏色名稱,例如:黑色、白色、藍色等等。

border

邊框

指定表格的邊框大小(像素)。

binding

沒有顯示

代表這個元件的 UIComponent,通常是在支持的檔案中。

cellpadding

填補

指定資料格邊框和內容的間隔。 如果這個屬性值是像素長度,四個邊距和內容之間都應該是這個距離。

cellspacing

間距

指定 Cell 之間要保留的空間量(像素)。

columnClasses

直欄類別

指派已定義的 CSS 樣式表樣式給資料表格元件的直欄。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。

dir

沒有顯示

指定執行時期的元件呈現方向。值可以是:
  • ltr - 由左至右
  • rtl - 由右至左

first

沒有顯示

要顯示的第一列的索引。

footerClass

標底類別

指派已定義的 CSS 樣式表樣式給資料表格元件的直欄標頭。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。

frame

沒有顯示

指定可看到格線周遭頁框的哪幾邊。

headerClass

標頭類別

指派已定義的 CSS 樣式表樣式給資料表格元件的直欄標頭。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。

id

ID

指派元件的名稱。應該是 JSP 內的唯一名稱。

lang

沒有顯示

指定元件屬性值和文字內容的基本語言。採用 ISO 標準語言縮寫碼(如 "en" 代表英文、"en-US" 代表美國英文、"fr" 代表法文、"de" 代表德文)。

rendered

沒有顯示

可以設成 true 或 false:
  • false - 執行時期不會將元件呈現在瀏覽器中。
  • true - 將會呈現元件。

rowClasses

橫列類別

在顯示列時所輪流選取的一組類別。這可以用手動方式來定義,或者按一下按鈕,然後從視窗內選取想要的類別。

rows

每一頁的列數

指定執行時期所顯示的列數。

rules

沒有顯示

指定表格內的各資料格之間將出現哪些尺規:
  • 群組
  • 全部

style

樣式:內容

指定元件的 CSS 樣式資訊(如 style="font-size : 8pt ; color : red")。定義已選取的元件的內容(例如字型和顏色)。 這可以用手動方式來完成,或者按一下按鈕,然後從視窗內選取想要的內容。

styleClass

樣式:類別

當呈現這個元素時,所要套用的 CSS 樣式類別清單,各個類別之間是用空格加以區隔。 這個值必須作為產生的標記之 "class" 屬性來傳遞。定義已選取的元件的類別(例如樣式表)。 這可以用手動方式來完成,或者按一下按鈕,然後從視窗內選取想要的「類別」。

summary

沒有顯示

指定在非視覺化媒體中呈現的使用者代理程式的摘要明細字串。

title

沒有顯示

指定執行時期在瀏覽器中顯示成工具要訣的標題文字。

value

指定執行時期所顯示的元件起始文字值。 包含要顯示的資訊,其格式為指定值或動態值的指標。

var

沒有顯示

使用值屬性來指定可用資料的參照變數名稱。

width

寬度

指定元件的寬度(像素或百分比)。如果要指定使用百分比,請在值中附加 %。

相關概念
利用 JavaServer Faces 來建立資料存取 Web 應用程式
相關工作
建立 Faces 應用程式 - 概觀
相關參考
Faces 元件參照
Faces 元件的屬性
勾選框
讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.