FVS表格擴展後排序

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 應用場景

製作 FVS 表格時，使用者希望單欄或多欄，透過點選表頭實現升冪或降冪的效果。

例如在一張訂單表格中，點選「運貨費」資料欄的表頭，可以將「運貨費」升冪或降冪排列。如下圖所示：

1.3 實現思路

可使用 擴展後排序 功能實現：單欄/多欄透過點選表頭，進行升冪或降冪。

注：排序更多內容請參見文檔：排序簡介 。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 準備資料

建立一個資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM 訂單 where 訂單ID not null。如下圖所示：

2.3 設計表格

1）新增一個表格組件，點選「編輯組件」進入表格編輯介面。如下圖所示：

2）如下圖設計表格，將欄位拖到對應儲存格中。如下圖所示：

3）設定重複標題列。如下圖所示：

4）將兩個日期欄位所在儲存格 C2 和 D2 的格式改為日期型，yyyy-MM-dd 樣式。如下圖所示：

5）將 F2 儲存格的格式改為數字，#0.00 樣式，即保留兩位小數。如下圖所示：

2.4 設定排序

1）選中最父格 A2，將其資料設定從分組改為「列表」。如下圖所示：

注：需要保證最父格的資料設定是「列表」，否則排序將不生效。

2）選中 A2 儲存格，點選儲存格屬性面板擴展後排序功能的「新增主要排列序」。

點選排序區域右側  按鈕，選擇「F2」儲存格，排序依據設定為「儲存格」，排序規則設定為「不排序」。

設定表頭區域為 F1 儲存格，勾選「允許使用者點選排列順序」，排序依據保持預設勾選的三個即可。

這樣預覽時，所有資料預設不排序，點選運貨費的表頭時，彈出三個排序方式供使用者選擇，實現動態排序效果。如下圖所示：

2.5 設定表格內容適應方式

若表格內容為鋪滿狀態，而設定的表頭排序在最後一欄，預覽點選表頭排序按鈕時會被表格捲軸遮擋，不便於點選。

因此需要自行調整儲存格的位置，本例將表格「內容適應方式」修改為「無」，並將表格尺寸寬度設定的比表格內容寬一些。如下圖所示：

2.6 效果預覽

2.6.1 PC端

點選範本右上角「儲存」按鈕，再點選「預覽」。預覽後的效果如 1.2 應用場景中所示。

2.6.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

本節範例效果：點選「訂購日期」或「運貨費」的表頭，可分別實現降冪升冪展示資料欄。

3.1 設定排序資料欄

仍然選中 A2 儲存格，新增主要排列序和次要排列序。如下圖所示：

• 主要排列序：排序區域為 C2 儲存格，排序依據為儲存格，排序規則為「降冪」。

• 次要排列序：排序區域為 F2 儲存格，排序依據為儲存格，排序規則為「升冪」。

此步驟的作用為：使範本在預覽時先按照「訂購日期」排序，相同的「訂購日期」再按照「運貨費」排序。

3.2 設定排序表頭

設定多欄排序表頭方法如下：

• 選中 A2 儲存格，設定表頭區域為 C1，勾選「允許使用者點選排列順序」。

• 選擇 F2 儲存格，設定表頭區域為 F1，勾選「允許使用者點選排列順序」。

以 F2 儲存格為例，如下圖所示：

3.3 效果預覽

3.3.1 PC端

傳回視覺化看板後，點選右上角「儲存」，再點選「預覽」。效果如下圖所示：

3.3.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS表格擴展後排序.fvs

單欄排序、多欄排序分別對應範本中的兩個頁面。