Mashup Builder > 小器具 > 舊有小器具 > 清單小器具 (舊有)
清單小器具 (舊有)
「清單」小器具可讓您在單一欄清單視圖中顯示任何資料集。清單支援用許多不同方式來轉譯單一欄,包括設定顏色前後關聯以及在儲存格中轉譯圖像。您可以透過「清單」小器具的內容來配置基本轉譯類型、要檢視的欄,以及狀態格式。您可以配置清單使其顯示為簡單清單方塊、組合方塊、下拉清單方塊或單選按鈕清單。
清單組態
將資料服務連結至清單後,您可以挑選要在小器具內容面板中顯示的欄。
欲針對資料使用特定的轉譯器,或欲使用狀態格式,請按下 ListFormat 內容旁邊的「轉譯器」「狀態」按鈕。您可以針對顯示的欄執行下列操作:
選擇用於儲存格的轉譯器 (用來在所要顯示的資料中處理特定資料類型)。
選擇樣式 (固定或狀態格式)。
如果想要套用固定 (非動態) 樣式,請選取「固定樣式」並選擇一個先前定義的樣式定義。如果想要執行動態格式 (根據在列中傳回資料設定顏色前後關聯等等),請選擇以狀態為基礎的格式。
使用以狀態為基礎的格式,可根據列中的任一欄來將樣式套用至清單中的該列。欲定義狀態格式器:
1. 選取格式依賴的欄 (可以是傳回資料服務中的任一欄)。
2. 選取想要用於已顯示欄的狀態定義 (應符合相依欄位的資料類型)。
3. 接受狀態定義的預設值,或是特別針對此清單定義和轉譯來取代它們。
組合方塊
組合方塊可讓您使用預先鍵入搜尋來縮小下拉清單中選項的清單範圍。Multiselect 內容可讓您在所有清單項目的旁邊新增核取方塊 (或者使用 CTRL + SHIFT 鍵)。
下列樣式定義可與組合方塊搭配使用:
ComboTextboxStyle
ComboDropdownButtonStyle
屬性名稱
描述
基礎類型
預設值
可繫結?(Y/N)
可當地語系化?(Y/N)
CustomClass
要套用至小器具頂部分區之使用者定義的 CSS 類別。可輸入多個類別,之間以空格分隔。
STRING
n/a
Y
N
ListFormat
ListFormat 內容用來針對資料套用特定的轉譯器,以及/或是將「固定樣式」或「以狀態為基礎的格式」套用至顯示的資料。
n/a
Renderer and State Value Formatting
N
N
MultiSelect
可讓您在清單中選取多個項目。核取方塊會新增至每個清單項目。
BOOLEAN
False
N
N
AutoSelectFirstRow
載入資料服務時,自動選取第一列資料。
BOOLEAN
False
N
N
檢視
決定清單的類型 (清單、下拉清單、組合方塊或單選按鈕清單)。組合方塊可讓您執行預先鍵入搜尋來縮小清單範圍。
STRING
清單
N
N
WidthOfDropdownView
下拉清單視圖的寬度 (像素)。小器具的下拉清單部份可以比小器具還寬。
NUMBER
110
N
N
NumberOfItemsInDropdownView
在下拉清單視圖中時,要在清單中檢視的項目數。
NUMBER
6
N
N
NumberOfItemsPerPage
可讓您設定在「組合方塊」清單檢視中為每頁顯示的項目數。
輸入 ≤ 0 的值可禁用分頁。
NUMBER
500
N
N
TabSequence
小器具在 Tab 序列中的索引。
NUMBER
0
N
N
Alignment
小器具的對齊方式 (靠左對齊、靠右對齊或置中對齊)。
STRING
靠左對齊
N
N
LabelAlignment
標籤的對齊方式 (左、右或置中)。
STRING
左鍵
N
N
Data
小器具的資料來源。
INFOTABLE
n/a
Y
N
DisplayField
表示所要顯示之資料的資料負載欄位。
n/a
n/a
N
N
ValueField
表示值的資料負載欄位。
n/a
n/a
N
N
EnableKeyboardSelections
啟用鍵盤選取。
BOOLEAN
True
N
N
TextIfNoSelection
在清單中未選取任何項目時所顯示的文字。
STRING
n/a
N
Y
TextIfNoSelectionType
將在 TextIfNoSelection 內容欄位中輸入的文字顯示為混搭中的佔位符號或可編輯文字。
STRING
editable
N
N
ClearIfNoSelection
未選取任何項目時清除 SelectedText。
BOOLEAN
False
N
N
DisableSelectedStyle
禁用適用於任何所選組合項目的樣式。
BOOLEAN
False
N
N
SelectedText
目前選取的資料負載欄位值。
* 
繫結 SelectedText 之後,會在「下拉式方塊」檢視中顯示任何您鍵入的文字,無論您輸入的文字是否為清單中的現有文字。
* 
繫結 SelectedText 之後,會在所有其他清單檢視中僅顯示目前所選的清單中的現有項目,而不會顯示您輸入的任何其他文字。
STRING
n/a
Y
N
SelectedItems
目前選取的資料負載欄位值。
* 
繫結 SelectedItems 之後,會在「下拉式方塊」檢視中顯示任何您鍵入的文字,無論您輸入的文字是否為清單中的現有文字。
* 
繫結 SelectedItems 之後,會在 Multiselect 內容可用的所有其他清單檢視中僅顯示目前所選的清單中的現有項目。不會顯示您輸入的任何其他文字。
INFOTABLE
n/a
Y
N
ListBackgroundStyle
清單背景的樣式。
STYLEDEFINITION
n/a
N
N
ListItemStyle
為下拉清單項目設定樣式。
STYLEDEFINITION
n/a
N
N
ListItemAlternateStyle
為下拉清單中的替代列設定樣式。
STYLEDEFINITION
n/a
N
N
ListItemHoverStyle
為下拉清單中的項目暫留設定樣式。
STYLEDEFINITION
n/a
N
N
ListItemSelectedStyle
為下拉清單中的所選項目設定樣式。
STYLEDEFINITION
n/a
N
N
ListLabelStyle
為顯示在組合方塊上方的下拉清單標籤文字設定樣式。
STYLEDEFINITION
n/a
N
N
ListFocusStyle
文字方塊處於焦點時的樣式。
STYLEDEFINITION
n/a
N
N
ToolTipStyle
啟用時工具提示的樣式。
STYLEDEFINITION
n/a
N
N
DropdownButtonStyle
下拉清單按鈕的樣式。
STYLEDEFINITION
n/a
N
N
DropdownStyle
下拉清單容器的樣式。
STYLEDEFINITION
n/a
N
N
DropdownSelectedStyle
為所選項目的文字顏色設定樣式。
STYLEDEFINITION
n/a
N
N
ComboTextboxStyle
為組合方塊的文字方塊設定樣式。
STYLEDEFINITION
n/a
N
N
ComboDropdownButtonStyle
為組合方塊的下拉清單圖示設定樣式。
STYLEDEFINITION
n/a
N
N
ComboItemHighlightedStyle
組合項目反白顯示樣式。
STYLEDEFINITION
n/a
N
N
RowHeight
在執行時間每一列的高度。
NUMBER
28
N
N
TextVerticalAlignment
可讓列中的文字垂直對齊。預設值為 30,適用於小於 14 px 的字型大小。對於任何較大的字型大小,您必須將此值調整為較大的設定,以確保文字完全在列中可見。
* 
使用瀏覽器中的開發者工具透過調整清單列的 line height CSS 內容來設定正確對齊文字的精確值。針對字型大小 11 px,此線高度設定為約 30;針對最大字型大小 72 px,您必須將線高度調整為約 72-90 以根據所選列高度獲得最佳對齊。由於各種瀏覽器有不同的字型大小轉譯,可能會需要進行此手動調整。如果輸入的值不精確,文字對齊可能會不正確,且文字只能在混搭中部分顯示。
NUMBER
30
N
N
DoubleClicked
事件。DoubleClicked 事件讓您可單按一下選取資料物件,但針對其他事件則仍使用連按兩下的方式,比如連結連按兩下來觸發某個導覽連結。
n/a
n/a
Y
N
標籤
要顯示在小器具上的標籤。
STRING
n/a
Y
Y
這是否有幫助?