DataGrid

當使用者想看詳細的資訊，可以使用Data Grid，直接顯示 Table 中的欄位與資料。 除此之外，Data Grid可以對新增欄位與現有欄位做(運算、彙總、格式化條件、圖示集、資料橫條、顏色級距、資料顏色)設定， 設定中想要呈現圖示欄位(走勢、燈號、趨勢、Seq)也可以透過此元件進行呈現。
在Runtime點選欄位標題時，可以針對欄位切換正反排。

並且 Data Grid 也可以搭配其他的組合元件呈現，例如下圖， Data Grid 就可依照不同產品線的不同欄位(去年同期比較、達成率、月份趨勢) 顯示(長條圖、Gauge、折線圖)的呈現， 一個Data Grid就可以表現出想要分析的資料。Pivot Grid 同樣也可以做到此效果

此章節包含主題:

屬性：

• 欄位編輯器：

• 欄位寬度產生方式：選擇DataGrid欄寬寬度要依據『自動』、『依欄寬但不小於內容』或『依欄寬』來產生欄位

• 自動產生欄位：依資料規格產生欄位，可搭配欄位編輯器，當不啟用時，會以欄位編輯器為主

• 啟用欄位編輯器：可自訂欄位屬性，當欄位編輯器以及自動產生欄位未啟用，會以欄位編輯器為主

以下設定系統會將右邊屬性的自動產生欄位取消勾選，當資料面有新增欄位時，需自行點編輯控制項加欄位

• 新增走勢線：需設定此控制項之搭配的子層資料欄位，才會有效果

詳細設定：走勢線詳細設定

• 新增燈號：透過條件判斷式，符合的才呈現燈號樣式

詳細設定：燈號詳細設定

• 新增趨勢：作3個欄位數值比較，主要是以第一期欄位為主，比較後續幾期的趨勢，如上升、下降、持平等

詳細設定：趨勢詳細設定

• 新增序號：依資料筆數，產生1~N的序號資料

• 新增Gauge：在DataGrid的欄位裡內嵌Gauge



• Gauge：設計者可以設定高低標數值及顏色，搭配內建多元Gauge風格，以直覺的「指針」呈現達成指標

詳細設定：Gauge詳細設定

• 新增GannttChart：在DataGrid的欄位裡內嵌甘特圖



• GannttChart：在專案管理中，甘特圖顯示專案的終端為開始和結束，管理者可透過甘特圖，監控專案當前各任務的進度。

詳細設定：GannttChart詳細設定

• 新增Chart：在DataGrid的欄位裡內嵌Chart



• Chart：可將資料表中的欄位內容選用合適的統計圖呈現

詳細設定：Chart詳細設定

• 新增HeatMap：在DataGrid的欄位裡內嵌熱力圖



• HeatMap：使用在生產監控上，監控區段時間內機台運作狀況，也可以利用顏色的設定，來顯示機台的運作狀況

詳細設定：HeatMap詳細設定

• 標題：

• 標題顯示：選擇是否顯示DataGrid標題

• 字型：選擇DataGrid標題字型

• 字型大小：選擇DataGrid標題字型大小

• 字型顏色：選擇DataGrid標題字型顏色

• 背景顏色：選擇DataGrid標題背景顏色

• 資料：

• 資料產生方式：選擇資料產生的方式，可以選擇『自動』、『移動到才產生』、『產生過不再產生』、『全產生』或『partialOver』

• 列高類型：選擇資料的列高要『自動』或是『依內容』去調整

• 字型：選擇DataGrid資料文字字型

• 字型大小：選擇DataGrid資料文字大小

• 字型顏色：選擇DataGrid資料文字顏色

• 單數列背景顏色：選擇DataGrid單數列背景顏色

• 雙數列背景顏色：選擇DataGrid雙數列背景顏色

• 選擇列：

• 選擇列字型顏色：設定當DataGrid某一列被選擇後的字型顏色

• 選擇列背景顏色：設定當DataGrid某一列被選擇後的背景顏色



• 其他：

• 底層背景顏色：設定DataGrid背景顏色

• 加總背景顏色：設定DataGrid加總欄位背景顏色

• 縱向捲軸：假設DataGrid的內容大於設定的高度，選擇是否要顯示捲軸

• 橫向捲軸：假設DataGrid的內容大於設定的寬度，選擇是否要顯示捲軸

• 合計欄位：選擇是否顯示合計欄位

• 元件標題：

• 顯示：選擇是否顯示元件標題

• 內容：設定DataGrid標題文字內容

• 對齊：選擇元件標題文字要『靠左』或『置中』

• 字型顏色：設定元件標題的字型顏色

• 背景顏色：設定元件標題背景顏色

• 陰影：選擇DataGrid元件外框是否要陰影



• 顯示過濾欄位名稱：選擇是否要顯示過濾欄位

• 顯示過濾條件：選擇是否要顯示過濾條件