格點小器具

Mashup Builder > 小器具 > 標準小器具 > 格點小器具

格點小器具

使用「格點」小器具可檢查、檢視及分析來自資料負載來源的資料。資料來源中的每個資料負載欄都會顯示為格點上的一欄。

下列組態適用於 ThingWorx 9.4 或更新版本：

• 在格點工具列上顯示自訂動作。

• 反白新增至格點的新列。

• 動態配置 ShowRowNumbers 內容。

下列組態適用於 ThingWorx 9.3.7 或更新版本：

• 當分頁格點且頁面發生變更時，保留所選列 ID。

下列組態適用於 ThingWorx 9.3.6 或更新版本：

• 按一下超連結時觸發事件，而不是開啟 URL。例如，您可以傳遞連結資料並導覽至混搭。

下列組態適用於 ThingWorx 9.3.4 或更新版本：

• 繫結子資料以建立具有多層級父資料與子資料的階層樹格點。

• 設定使用者可在執行時間展開的列數上限。

• 從進階格點移轉舊有動態組態。

• 透過指定服務中列的 ID 來自動展開列。

• 禁用父列及其子項。

• 配置使用鍵盤導覽時焦點框的選取行為。

• 在「驗證」面板上配置驗證訊息的可見度與圖示。

下列組態適用於 ThingWorx 9.3 或更新版本：

• 啟用格點、列或儲存格層級的編輯。

• 在執行時間重定欄大小及重新排序欄。

• 顯示執行時間選單，以便使用者顯示、隱藏及重新排序格點上的欄。

• 定義啟用編輯時用於驗證輸入的驗證規則與訊息。

• 在單獨的欄中顯示列編號。

• 設定格點欄的最小與最大寬度。

• 使用 JSON 組態資料動態配置小器具。

您必須將格點 (進階) 小器具的現有資料服務輸出更新為 JSON。

• 新增頁尾部分。

• 刪除列時顯示確認訊息。此組態在 ThingWorx 9.3.1 或更新版本中提供。

以下是 ThingWorx 9.2 中可用組態的清單：

• 使用轉譯器格式化資料欄並套用狀態格式。

• 以遞減或遞增順序排序欄資料。

• 使用篩選方塊篩選資料。

• 對齊標題與本文儲存格內的內容。

• 顯示列選取的核取方塊。

• 使用像素、百分比或分數值自動或手動設定欄寬。

• 將標題與本文列顯示為單行並防止文字換行。

• 設定格點列的最小與最大高度。

• 在格點上選取單一或多個列。

此外，您可以將格點與其他小器具組合在一起 (例如分頁、基於晶片的資料篩選器，以及工具列)，以在混搭內建立具唯一性及互動的資料檢視。

「格點」小器具也可作為 ThingWorx Web 元件 SDK 中的 Web 元件使用。

效能考量

「格點」小器具支援包含上百萬列的大型資料集。但是，顯示數百萬列會影響載入時間效能，並難以尋找及分析資訊。以下是「格點」小器具的最佳作法：

• 避免建立含有數百萬列的資料表。

• 設定適當的最小與最大列高度，以可存取的方式顯示資料列。

• 使用分頁可將大型集合分成多個頁面，並可讓使用者控制要在每個頁面上顯示的列數。

格點小器具剖析

1. 標題

2. 格點篩選器區域

3. 標題列

4. 本文列

5. 列選取核取方塊

6. 欄排序按鈕

鍵盤鍵

金鑰	格點	樹格點：
TAB	變更焦點方塊來反白標題中的主要格點元素，例如篩選器、選取核取方塊與排序按鈕。	變更焦點方塊來反白標題中的主要格點元素，例如篩選器、選取核取方塊與排序按鈕。您可以使用 Focus 配置焦點
方向鍵	使用上、下、左、右方向鍵來垂直或水平變更焦點。	右 - 展開焦點列。左 - 摺疊焦點列。上與下 - 移至下一個與上一個焦點列或儲存格。
HOME END	將焦點集中在目前列中的第一個或最後一個儲存格。	聚焦於第一個或最後一個儲存格或列。
上一頁下一頁	將焦點集中在目前欄或列中的第一個或最後一個可見儲存格。	聚焦於目前格點檢視中的第一個或最後一個可見儲存格或列。
空格鍵 ENTER	啟用列選取時觸發 RowClicked 事件或選取目前列。	展開或摺疊父列。

下表列出 ThingWorx 9.4 或更新版本中可用的格點小器具內容：

屬性名稱

描述

基礎類型

預設值

可繫結

可當地語系化

RowSelected

當選取格點上的一或多個列時，傳回 True。例如，當選取一或多個列時，您可以使用此內容來在工具列上顯示自訂動作。

BOOLEAN

False

ToolbarActionsData

可定義要顯示在格點工具列中的自訂動作的資料負載。當您將服務繫結至此內容時，會將每個自訂動作的其他內容都新增至「內容」面板。

Infotable

ToolbarActionsPosition

控制工具列自訂動作相對於格點上的編輯、新增與刪除按鈕的位置。選項：「無」、「先於」、「後於」。

選取「無」可隱藏動作。

STRING

後於

HighlightNewRows

反白在執行時間新增至格點的新列。

BOOLEAN

False

下表的小器具內容適用於 ThingWorx 9.3.7 或更新版本：

屬性名稱

描述

基礎類型

預設值

可繫結

可當地語系化

SelectedRowsIDs

包含格點上所有所選列的 IDFieldName 值的資料負載。當分頁格點資料時，此內容會傳回所有頁面的所選 ID 值。當頁面變更時，您可以使用此內容保留所選列。

當小器具配置為樹格點時，不支援此內容。

Infotable

N/A

下表的小器具內容適用於 ThingWorx 9.3.6 或更新版本：

屬性名稱	描述	基礎類型	預設值	可繫結	可當地語系化
LinkClicked	當按一下格點儲存格中的超連結時觸發的事件。	事件	N/A	Y	N
ClickedLinkData	包含超連結列資料的資料負載。	Infotable	N/A	Y	N
ClickedLinkColumn	傳回上次按一下之超連結的欄名稱。當格點包含具有超連結的多個欄時，您可以使用此內容。	STRING	N/A	Y	N

下表列出 ThingWorx 9.3.4 或更新版本中可用的格點小器具內容：

屬性名稱

描述

基礎類型

預設值

可繫結

可當地語系化

ChildData

這是一個資料負載，其定義了在展開樹節點時動態載入之子節點的資料來源。僅限「樹格點」。

Infotable

N/A

ParentIDFieldName*

指定樹格點資料中的資料負載欄，其中包含每個子項的父 ID。此 ID 用來建立階層樹狀結構。僅限「樹格點」。

STRING

parentId

HasChildrenFieldName*

指定用來指示列是否有可用子資料之資料負載欄的名稱。

若要指示列沒有子項，請輸入下列其中一項：‘0’、0、‘false’、false、空字串或 undefined。

其他任何值都表示列有子項。僅限「樹格點」。

STRING

hasChildren

IncludeRowExpansionParents*

決定當選取或展開子列時，是否包括未包括在預先載入用戶端資料中的父列。若為 True，會隨子列一起擷取父列，並會保留階層。僅限「樹格點」。

BOOLEAN

False

ExpandableRows

包含可展開之樹節點 ID 的資料負載。若要使格點列可展開，只需要「列 ID」欄。當選取 AlwaysExpanded 時，會略過此資料並展開所有列。僅限「樹格點」。

Infotable

N/A

AlwaysExpanded*

展開格點上的所有樹節點。

欲使用 PreserveRowExpansion 內容，請將此內容設定為 False。僅限「樹格點」。

BOOLEAN

False

ExpandCollapseAll*

新增可讓您展開及摺疊格點上所有樹節點的控制項。僅限「樹格點」。

展開及摺疊列時，會保留所選列。

BOOLEAN

False

PreserveRowExpansion*

重新整理格點時保留展開的列。

當 AlwaysExpanded 為 true 時，會展開所有預先載入的列。您必須設定 CacheRuntimeChanges 內容來在變更格點檢視或在頁面之間導覽時，保留展開的列。僅限「樹格點」。

BOOLEAN

False

ExpandCollapseIcon*

控制當未將資料繫結至 ChildData 內容時，用來展開及摺疊格點上樹節點的圖示類型。僅限「樹格點」。支援的選項：「插入記號」、「箭頭」、「加/減」

STRING

「插入記號」

ExpandLoadedRows

啟動網格時，會自動展開所有預先載入的資料。必須關閉此內容才能使用 PreserveRowExpansion 內容。僅限「樹格點」。

BOOLEAN

False

SelectFocusedItem*

若為 true，焦點框用於選取項目。若為 false，則分別設定聚焦狀態與選取狀態。僅限「樹格點」。

BOOLEAN

False

SelectParentOnly

禁用在選取父項時自動選取子節點。僅限樹格點。

BOOLEAN

FocusNavigationMode*

控制變更焦點後最先要聚焦的元素。您可以先導覽到列、儲存格或僅導覽到儲存格。僅限「樹格點」。

STRING

「先導覽到列」

PrimaryColumnFixedSize*

禁用主要欄的大小調整，並將其設定為固定大小。僅限「樹格點」。當 ResizeColumns 為 true 時，會略過此內容。

BOOLEAN

False

IDPathSeparator*

可讓您指定用來分隔 ID 路徑的字元。

路徑分隔符號字元在樹網格中用來選取由網格動態載入但未在用戶端載入的列。僅限「樹格點」。

STRING

AllowDisabledNodes

可讓您禁用樹格點上的節點。

BOOLEAN

False

DisableChildNodes

禁用已禁用之父節點的子列。

BOOLEAN

False

DisabledStateField

指定用來為樹格點上每一列設定已禁用狀態的資料負載欄。

INFOTABLE

N/A

LegacyConfiguration

這是一個可繫結內容，可讓您使用組態字串而非小器具內容來動態配置格點。此內容用來支援自「格點 (進階)」小器具的移轉。欲新增組態，請改用 JSON 組態內容。

STRING

N/A

ResetButtonClicked

當按一下「重設」按鈕時會觸發的可繫結事件。

事件

N/A

下表列出 ThingWorx 9.3 或更新版本中可用的格點小器具內容：

動態格點組態中支援標記有星號 (*) 的內容。如需有關動態組態的詳細資訊，請參閱使用 JSON 資料配置格點。

屬性名稱	描述	基礎類型	預設值	可繫結?	可當地語系化? (Y/N)
IsEditable*	可讓使用者在執行時間編輯格點資料。依預設，將編輯模式套用至整個格點時，會自動儲存格點資料。	BOOLEAN	False	內/外	N
EditLevel*	控制使用者可在執行時間編輯格點資料的方式。選取「整個格點」可同時編輯並儲存所有變更，選取「單列」可一次一列地編輯並儲存變更，或選取「單個儲存格」可一次一個儲存格地編輯並儲存變更。	STRING	「單個儲存格」	否	N
EditButton*	在格點工具列上顯示可讓使用者開啟或關閉編輯的編輯控制項。	BOOLEAN	False	否	N
RowAddButton*	在格點工具列上顯示「新增」按鈕，可讓使用者使用表單將新列新增至格點。	BOOLEAN	False	否	N
RowDeleteButton*	在格點工具列上顯示可讓使用者刪除所選列按鈕。	BOOLEAN	False	否	N
ConfirmDelete	可繫結服務，可讓您將刪除列按鈕繫結至「確認」函數。	服務	N/A	In	N
DeleteRowClicked	當按一下格點工具列上的刪除列按鈕時會觸發的事件。	事件	N/A	Out	N
RowEditFormTitle*	指定要為列編輯表單顯示的標題。若要隱藏標題並將此區域用於表單，請將其保留空白。	STRING	N/A	In	Y
EditControlVisibility*	指定何時在格點上顯示編輯控制項。支援的選項包括：「暫留或具有焦點時」、「總是」、「無」。	STRING	「暫留或具有焦點時」	In	N
EditControlType*	設定用於編輯格點的控制元素。可用選項為「圖示」或「連結」。您可以使用 EditControlIcon 與 EditControlLabel 內容選擇圖示或設定連結文字。	STRING	連結	否	N
EditControlLabel*	將 EditControlType 設定為「連結」時，設定編輯控制項的標籤。	STRING	編輯	In	Y
EditControlIcon*	將 EditControlType 設定為「圖示」時，為編輯控制項顯示的圖示。	IMAGE	N/A	否	N
EditCellStarted	當使用者開始編輯格點上的儲存格時將觸發的事件。	事件	N/A	Out	N
EditCellCompleted	當使用者結束編輯格點上的儲存格時將觸發的事件。	事件	N/A	Out	N
EditRowStarted	當使用者開始編輯格點上的列時將觸發的事件。	事件	N/A	Out	N
EditRowCompleted	當使用者編輯完格點中的列時觸發的事件。	事件	N/A	Out	N
EditCanceled	當使用者按一下「取消」按鈕時觸發的事件。	事件	N/A	Out	N
Cancel	取消對格點進行的目前編輯而不儲存的可繫結資料服務。	服務	N/A	In	N
EditStarted	當按一下「編輯」按鈕時觸發的事件。	事件	N/A	Out	N
EditCompleted	在進行編輯之後，按一下「儲存」按鈕時將觸發的事件。	事件	N/A	Out	N
EditedData	包含格點上已編輯項目的資料負載。	INFOTABLE	N/A	Out	N
DeletedData	包含格點上已刪除項目的資料負載。欲將資料從伺服器中刪除，請將資料負載繫結至自訂資料服務。	INFOTABLE	N/A	Out	N
HighlightDraftState	在儲存格層級上編輯時，使用不同顏色反白含有未儲存變更的儲存格。	BOOLEAN	False	否	N

ShowValidationSuccess*	當輸入的資料驗證成功時，顯示成功訊息。	BOOLEAN	False	否	N
ValidationSuccessIcon*	要顯示在成功訊息旁邊的圖示。	媒體挑選器	成功圖示	否	N
ShowValidationFailure*	當輸入的資料驗證失敗時，顯示失敗訊息。	BOOLEAN	False	否	N
ValidationFailureIcon*	要顯示在失敗訊息旁邊的圖示。	媒體挑選器	資訊圖示	否	N
ShowValidationCritera*	在編輯格點中的儲存格時，顯示有關所需輸入模式的提示訊息。	BOOLEAN	False	否	N
ValidationCriteriaIcon*	要顯示在驗證條件之提示訊息旁邊的圖示。	媒體挑選器	資訊圖示	否	N

ShowFooter*	將頁尾區域新增至格點。	BOOLEAN	False	否	N
ShowHeaderRowInFooter*	當 ShowFooter 設定為 True 時，顯示格點頁尾中的標題列。	BOOLEAN	False	否	N
FooterData*	包含格點頁尾之組態資料的資料負載。	INFOTABLE	N/A	In	N

ShowRowNumbers*

在格點中以單獨欄顯示列編號。

BOOLEAN

False

N/A

ColumnsMenuOptions*	控制在執行時間顯示在欄組態選單中的選項。選取「無」可隱藏選單。 • 「無」- 隱藏選單按鈕。 • 「可見度」- 在每個欄名稱旁邊顯示用於控制欄可見度的核取方塊。 • 「順序」- 在每個欄名稱旁顯示用於重新排序欄的拖曳圖示。 • 「可見度和順序」- 顯示上述兩個選項。	STRING	「無」	否	N
ColumnsMenuVisibleItems*	設定當在執行時間開啟欄組態選單時，最初顯示的項目數。使用此內容來限制選單高度。如有附加欄，將顯示捲軸。	NUMBER	6	否	N

下表列出 9.2 或更新版本中「格點」小器具的內容：

內容

描述

基礎類型

預設值

繫結

可當地語系化

CacheRuntimeChanges

將格點排序選項儲存在瀏覽器快取中，這些選項會在使用者導覽至不同的頁面或混搭時持續存在。

BOOLEAN

True

N/A

ClearFilteredSelection

控制當篩選或排序格點資料時，是否保留列選取。啟用此內容可在所選列位於格點檢視之外時清除選取項。

此內容只會影響到簡單的篩選方塊，不適用於包含資料的外部小器具，例如「基於晶片的資料篩選器」和「分頁」。

BOOLEAN

N/A

Data

在執行時間檢視格點時要顯示的資料負載資料來源。

INFOTABLE

N/A

DefaultSelectedRows*

指定載入格點時，要提前選取的列數。您可以鍵入數字範圍，例如 1-10，或逗號分隔的清單，例如 2, 4, 5。

此內容不會套用至樹格點。

STRING

N/A

ShowFilter

在格點上顯示篩選器方塊。

BOOLEAN

False

Filter

當排序或篩選格點時觸發的事件。

事件

N/A

FilterLabel*

設定篩選方塊的標籤。

STRING

N/A

FilterString*

簡單篩選方塊的篩選字串。

STRING

N/A

內/外

HideHeaderRow*

隱藏標題列。

BOOLEAN

False

IDFieldName*

選取在格點上包含每列主索引鍵或 ID 的資料負載欄。

STRING

N/A

Label*

指定格點標籤的文字。

STRING

「格點標題」

LabelType*

設定格點標籤類型。

STRING

「子標題」

N/A

LastClickedRow

包含格點中最後按一下的列之資料的資料負載。

INFOTABLE

N/A

MaxHeaderHeight

格點標題的最大高度，以像素為單位。

NUMBER

自動

MaxRowHeight

以像素為單位指定格點上列的最大高度。依預設，會根據每一列的內容設定高度值

NUMBER

自動

MinRowHeight

以像素為單位指定格點上列的最小高度

NUMBER

QueryFilter

包含要套用至格點資料之篩選器查詢的可繫結內容。您可以將內容繫結至「資料篩選器」小器具與資料服務，以篩選格點上的資料。

QUERY

N/A

內/外

Reset

可讓您在執行時間將格點小器具重設為其初始組態的可繫結服務。

服務

N/A

RowClicked

按一下格線中某一列後觸發的事件

事件

N/A

RowFormat

可開啟對話方塊，讓您選取您可以套用至格點列的狀態定義。您可以將狀態格式套用至小器具組態對話方塊中的欄，來覆寫儲存格的此狀態格式。

狀態定義

N/A

RowSelection*

可控制使用者在格點上一次可選取的資料列數目。可用選項有：

「無」 (預設)、「單一」和「多個」。

STRING

「無」

SelectedRows

可讓您設定或擷取格點上所選資料列的資料負載內容。當在已編頁格點中的頁面間移動時，此內容不會保留所選列資料。欲傳遞所有頁面的所選列，請改為使用 SelectedRowsIDs 內容。

INFOTABLE

N/A

內/外

SelectedRowsChanged

當所選列發生變更時將觸發的事件。

事件

N/A

SelectedRowsChangedCallback*

當所選列手動或使用資料服務變更時，會觸發 SelectedRowsChanged 事件。當設定為 False 時，只有在手動變更列選取時才會觸發事件。

BOOLEAN

True

N/A

SelectionCheckBoxHeaderAlignment

控制標題列中選取核取方塊的垂直對齊。

STRING

最上方

N/A

SelectionCheckboxRowAlignment

控制列選取欄中核取方塊的垂直對齊。

STRING

最上方

N/A

SingleLineHeader*

在單行上顯示標題列文字。當文字超過可用空間時，會截斷文字。依預設，標題文字會跨多行顯示。

BOOLEAN

False

SingleLineRows*

在單行上顯示每一列的內容。當完整內容無法容納在列內時，會顯示省略號。依預設，內容會跨多行顯示。

此內容不會套用至 HTML 格式的儲存格。

BOOLEAN

False

SortSelectionColumn*

將排序按鈕新增至核取方塊選取欄。這可讓您根據是否已選取資料列來排序資料列。

BOOLEAN

False

N/A

TabSequence

按下 TAB 鍵時小器具的序號。

NUMBER

N/A

這是否有幫助?