建立一份資料表格,其中的列對應於資料記錄,直欄對應於欄位或種類。 特性包括分頁控制、標頭和標底,以及列選項和動作的支援。
將「資料表」元件拖放至頁面:
設計時頁面上的「資料表」元件:
執行時期頁面上的「資料表」元件:
元件的「內容」視圖會顯示您可以用來設定元件的最常用屬性集,而且針對不同的元件,您也會看到新增控制項、動作或其他元件的選項。若要開啟「內容」視圖,請按一下「視窗 > 顯示視圖 > 內容」;然而依預設會開啟該視圖。
「資料表」元件的這些共同屬性會顯示在「內容」視圖中的 h:dataTable、顯示選項及橫列動作標籤上。請參閱所有資料表屬性 表格,以取得完整的屬性清單。其他用來新增動作及變更表格顯示和導覽的配置選項位於 h:dataTable>顯示選項和 h:dataTable>橫列動作標籤上:
配置選項 |
說明 |
---|---|
新增按一下某一列時要執行的動作 |
可讓您建立在按一下橫列時,所要發生的執行時期動作。 |
新增一個編輯直欄,以啟動表單來就地編輯行列內容。 |
可讓您提供執行時期的列內編輯作業。 |
新增高階分頁器 |
新增一個元件至標底區域,這個元件可使用箭頭在頁面之間移動。 |
新增移至分頁器 |
新增一個元件至標底區域,讓您從下拉清單中選取一個頁面。 |
新增頁面資訊 |
新增一個元件至標底區域,這個元件在頁面上顯示統計資料。 |
新增選項直欄至表格中 |
可讓您新增直欄及與表格內容相關的選項。 |
新增用來對標頭操作選項的動作 |
可讓您建立用來操作標頭資訊的動作。 |
新增簡易分頁器 |
新增一個元件至標底,這個元件會建立一個簡易的下拉功能表,以用來移至下一頁。 |
新增 Web 樣式分頁器 |
新增每一個頁碼至標底區域,讓使用者可以按一下想要的頁面。 |
分類>新增直欄以將表格列分類 分類>移除直欄以將表格列分類 |
新增含有橫列分類元件的直欄,您可以在其中設定表格排序值,以及新增圖示或文字至直欄。新增好之後,「分類」圖示會變成「移除」。 |
直欄 |
在表格中新增或移除直欄元件。您可以針對每個直欄來設定標籤、寬度及 ID,並且在表格中移動。 |
顯示標底 |
勾選這個方框會將標底區域 f:facet(標底)及 h:panelBox 插入資料表中,以便之後移入其他元件。 |
顯示標頭 |
勾選這個方框會將標頭區域 f:facet(標頭)及 h:panelBox 插入資料表中,以便之後移入其他元件。 |
按一下來建立/編輯自訂驗證程式碼 |
切換至「快速編輯」視圖,以便為各種使用者起始的事件輸入 Script 或程式碼片段。 |
「所有屬性」視圖會顯示您可以在元件上設定之所有屬性的表格,包括您可以從「內容」視圖來存取的那些屬性。若要切換至「所有屬性」視圖,請按一下「內容」視圖右上角的「所有屬性」圖示 。
屬性名稱 |
顯示在「內容」視圖中的排列依據 |
說明 |
---|---|---|
bgcolor |
背景顏色 |
以 6 位數的十六進位 RGB 值來指定背景顏色,並且以 # 符號作為開頭,或者輸入顏色名稱,例如:黑色、白色、藍色等等。 |
border |
邊框 |
指定表格的邊框大小(像素)。 |
binding |
沒有顯示 |
代表這個元件的 UIComponent,通常是在支持的檔案中。 |
cellpadding |
填補 |
指定資料格邊框和內容的間隔。 如果這個屬性值是像素長度,四個邊距和內容之間都應該是這個距離。 |
cellspacing |
間距 |
指定 Cell 之間要保留的空間量(像素)。 |
columnClasses |
直欄類別 |
指派已定義的 CSS 樣式表樣式給資料表格元件的直欄。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。 |
dir |
沒有顯示 |
指定執行時期的元件呈現方向。值可以是:
|
first |
沒有顯示 |
要顯示的第一列的索引。 |
footerClass |
標底類別 |
指派已定義的 CSS 樣式表樣式給資料表格元件的直欄標頭。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。 |
frame |
沒有顯示 |
指定可看到格線周遭頁框的哪幾邊。 |
headerClass |
標頭類別 |
指派已定義的 CSS 樣式表樣式給資料表格元件的直欄標頭。CSS 樣式表檔案必須先鏈結到元件的 JSP 才能使用。這可以用手動方式來輸入,或者按一下按鈕,然後從視窗內選取想要的類別。 |
id |
ID |
指派元件的名稱。應該是 JSP 內的唯一名稱。 |
lang |
沒有顯示 |
指定元件屬性值和文字內容的基本語言。採用 ISO 標準語言縮寫碼(如 "en" 代表英文、"en-US" 代表美國英文、"fr" 代表法文、"de" 代表德文)。 |
rendered |
沒有顯示 |
可以設成 true 或 false:
|
rowClasses |
橫列類別 |
在顯示列時所輪流選取的一組類別。這可以用手動方式來定義,或者按一下按鈕,然後從視窗內選取想要的類別。 |
rows |
每一頁的列數 |
指定執行時期所顯示的列數。 |
rules |
沒有顯示 |
指定表格內的各資料格之間將出現哪些尺規:
|
style |
樣式:內容 |
指定元件的 CSS 樣式資訊(如 style="font-size : 8pt ; color : red")。定義已選取的元件的內容(例如字型和顏色)。 這可以用手動方式來完成,或者按一下按鈕,然後從視窗內選取想要的內容。 |
styleClass |
樣式:類別 |
當呈現這個元素時,所要套用的 CSS 樣式類別清單,各個類別之間是用空格加以區隔。 這個值必須作為產生的標記之 "class" 屬性來傳遞。定義已選取的元件的類別(例如樣式表)。 這可以用手動方式來完成,或者按一下按鈕,然後從視窗內選取想要的「類別」。 |
summary |
沒有顯示 |
指定在非視覺化媒體中呈現的使用者代理程式的摘要明細字串。 |
title |
沒有顯示 |
指定執行時期在瀏覽器中顯示成工具要訣的標題文字。 |
value |
值 |
指定執行時期所顯示的元件起始文字值。 包含要顯示的資訊,其格式為指定值或動態值的指標。 |
var |
沒有顯示 |
使用值屬性來指定可用資料的參照變數名稱。 |
width |
寬度 |
指定元件的寬度(像素或百分比)。如果要指定使用百分比,請在值中附加 %。 |