格點小器具
格點小器具可讓您在格點視圖中顯示任何資料集。格點支援用許多不同方式來轉譯資料,包括依欄設定顏色前後關聯以及在儲存格中轉譯圖像。您可以透過格點小器具的組態對話方塊,使用 Configure Grid Columns 選取項來配置基本轉譯,包括欄順序、所要檢視的欄、欄標題和狀態格式。
格點支援在執行時間環境中將欄重定大小,以及經由按一下欄標題來排序資料。
可編輯格點
格點小器具在 Configure Grid Columns 選項裡還有一項特殊設定,即允許在格點中編輯列/欄。這樣您即可在格點中編輯值,然後將完整內容傳回服務中。或者,如果您要在格點中顯示 Selected Row,則可傳回該特定列。最佳做法是僅使用 Selected Row,因為視表格的大小而定可能會影響到記憶體使用情況。
如需詳細資訊,請檢視下列視訊教學專區:
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結?(Y/N) | 可當地語系化?(Y/N) |
---|
CustomClass | 要套用至小器具頂部分區之使用者定義的 CSS 類別。可輸入多個類別,之間以空格分隔。 | STRING | n/a | Y | N |
RowFormat | 用來在列的基礎上套用動態 (狀態) 格式的選用規則,可由儲存格狀態格式取代。 | STATE FORMATTING | 狀態格式 | N | N |
MultiSelect | 允許選取多個項目。 | BOOLEAN | False | N | N |
IsEditable | 允許編輯格點中的值? | BOOLEAN | False | N | N |
AutoSelectFirstRow | 初始載入資料時自動選取第一列。 | BOOLEAN | False | N | N |
CellTextWrapping | 讓儲存格中的值自動換行。 | BOOLEAN | False | N | N |
Data | 作為此內容之資料來源的資料負載。 | INFOTABLE | n/a | Y | N |
CurrentScrollTop | 目前捲到最上方。 | NUMBER | 0 | Y | N |
ScrollTop | 捲到最上方以指派。 | NUMBER | 0 | Y | N |
EditedTable | 使用格點編輯的表格。 | INFOTABLE | n/a | Y | N |
RowHeight | 列的高度。 | NUMBER | 30 | N | N |
ShowAllColumns | 顯示所有可用的欄。如果您的資料負載沒有資料形式,則應使用 ShowAllColumns。 | 若啟用此內容,則無法使用儲存格編輯和設定樣式等轉譯功能。 |
| BOOLEAN | False | N | N |
ShowDataLoading | 在資料載入時顯示資料。 | BOOLEAN | True | N | N |
DoubleClicked | 事件。讓您可單按一下選取資料物件,但針對其他事件則仍使用連按兩下的方式,比如連結連按兩下來觸發某個導覽連結。 | n/a | n/a | Y | N |
Visible | 小器具在執行時間是否可見? | BOOLEAN | True | Y | N |
格點組態
將資料服務連結至格點後,開啟 Grid Column Configuration 對話方塊。您可使用欄隱藏核取方塊來選擇應顯示哪些欄 (true = 顯示,false = 隱藏)。經由在清單中將顯示的欄上下拖曳可將它們重新排序。
欄標題由資料服務的資料形式自動指派,不過您可在組態對話方塊裡按欄加以取代。您還可以針對每一欄執行下列操作:
• 選擇用於儲存格的轉譯器 (用來在所要顯示的資料中處理特定資料類型 - 建議使用)
• 選擇自動寬度或固定寬度
• 選擇文字對齊方式
• 選擇樣式 (固定或狀態格式)
• 將欄指定為可編輯 (有或無驗證)
如果想要套用固定 (非動態) 樣式,請選取「固定樣式」並選擇一個先前定義的樣式定義。如果想要執行動態格式 (根據在列中傳回資料設定顏色前後關聯等等),請選擇以狀態為基礎的格式。
使用以狀態為基礎的格式時,您可以分別配置每欄資料,根據列中的資料將特定樣式套用至該欄。針對想要為其定義狀態格式器的每一欄,您必須執行下列操作:
• 選取格式依賴的欄 (可以是傳回資料服務中無論是否隱藏的任一欄)。
• 選取想要使用的狀態定義 (每欄各一個,並且應符合相依欄位的資料類型)
• 接受狀態定義的預設值,或是特別針對此格點定義和轉譯來取代它們。
將格點設定為可編輯後,隨後便可同時將特定欄指定為可編輯。您也可以使用 JavaScript 比較來根據欄名稱新增驗證。
範例:
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10