應用示例

以表格形式展示某傳感器設備上報的環境數據。可在預覽或應用發布后頁面，設置時間范圍，或對數值型屬性值進行升序或降序展示。

步驟一：添加組件

1. 創建Web應用。具體操作，請參見創建Web應用。

2. 在Web應用編輯器中，單擊最左側的組件圖標。

3. 在畫布左側組件列表上方，輸入表格，找到該組件，然后將組件拖拽到中間畫布。

   有關組件添加的更多信息，請參見添加組件。

   

步驟二：配置數據源

1. 在Web編輯器中，選中組件，在右側樣式中單擊配置數據源。

2. 在數據源配置頁面，選擇數據源類型，完成配置。

   可選數據類型有接口、數據表資源、靜態數據、應用推送。

3. 單擊確定。

   數據展示頁簽左側數據源顯示已配置的數據源名稱，維度和度量顯示從數據源中自動解析的屬性字段。

   說明

   數據源屬性字段匹配規則：

   • 維度：布爾型、字符型、時間型字段。

   • 度量：數值型字段。

4. 可選：單擊左上角數據表，查看已配置數據源的所有數據信息。

步驟三：配置數據展示

在數據展示頁簽，設置表格展示數據和樣式，如圖所示。

1. 根據實際需求，從維度或度量下拖拽需要展示的字段到數據字段框。

   說明

   拖拽字段后，可調整數據字段框中字段的順序，即表格顯示列的順序。

2. 可選：在數據字段框，單擊字段三角入口，執行以下操作。

   

   操作項	說明
   篩選器	添加字段到篩選器，作為篩選項根據該字段配置條件過濾展示數據。最多支持添加10個篩選器。 您也可從左側維度或度量中，單擊字段三角入口，添加字段到篩選器。 說明 只有當組件數據源類型為數據表資源時，才支持該功能。 更多信息，請參見篩選器配置。
   顏色標記	設置度量字段不同條件下的數據需要標記的顏色。支持配置不同的度量字段數據為相同或不同顏色。 在頁面右側屬性頁簽，顯示已標記的字段，支持重新編輯和刪除。
   設置顯示名	編輯字段在表格中的顯示名稱。

3. 在數據展示頁簽右側，單擊樣式，設置組件展示樣式。

   配置項	說明
   全局樣式	設置全局字體和背景色。
   導出數據入口	設置是否顯示表格數據的導出按鈕，及可顯示的效果。 說明 開啟導出數據入口后，僅支持導出當前頁面展示的數據。如果數據表設置了分頁器，僅支持導出當前表格第一頁展示的數據。
   表格標題	設置是否顯示表格標題，及可顯示的效果。
   表頭文字	設置表頭背景和文字的顯示樣式等。
   內容文字
   行/列樣式	設置行或列的顯示效果。 說明 選中行樣式中鼠標點擊鎖定后，可在應用運行頁面鎖定表格某行數據。 選中列樣式中允許在運行時手動調整顯示字段后，可在應用運行頁面，單擊表格最右側的按鈕，設置表格需要展示的數據列。
   表身外邊框	設置表格外邊框是否顯示，及可顯示的效果。
   分頁器	設置是否顯示分頁器，及可顯示的效果。開啟分頁器后，每頁數量的取值范圍為1~200行。 如果沒有開啟分頁顯示，但表格中數據過多，超出了表格的高度，可以通過鼠標滾動查看所有數據。如果選中了凍結首行，表格滾動時，表頭將固定在表格頂部。 說明 如果表格數據類型為接口數據源，顯示分頁器需要滿足的要求，請參見接口。
   篩選器	只有當組件數據源類型為數據表資源時，支持該功能。更多信息，請參見篩選器配置。
   無數據提示	設置是否顯示無數據提示。如果顯示，可設置顯示的樣式。

4. 單擊完成配置，返回Web應用編輯器，查看已配置的組件數據。

5. 調整組件在頁面中的最終位置。有關組件通用樣式配置的更多信息，請參見樣式配置。

步驟四：配置交互動作

1. 單擊交互配置交互動作。例如，單擊表格行，執行動作展示隱藏，顯示某個隱藏的組件，展示該行數據的說明信息。

   具體操作，請參見交互配置。

2. 單擊頁面右上方的預覽，預覽和調試組件展示的數據和效果。