特殊多欄排序

1.1 應用場景

在 FVS視覺化看板中，點選表格標題實現多列排序，並實現點第一下降冪，點第二下升冪，點第三下恢復原狀。效果如下圖所示：

注：決策報表實現方式請參考歷史文檔 决策报表实现特殊多列排序 。

1.2 實現思路

擴展後排序結合 JavaScript 類型的超連結實現，且 JavaScript 有 3 個參數：

參數a：升冪/降冪標記

參數b：當前欄位標記

參數c：上次點選標記

透過 3 個參數的判斷可以實現該特殊多列排序的效果。

2.1 建立範本

1）點選菜單欄「檔案>建立視覺化看板」，保持預設「建立空白看板」選項。

2）視覺化看板名稱自訂為特殊多列排序 ，畫布大小保持預設「1280*720px」。

3）範本樣式選擇「淺色主題一」，點選「建立看板」，如下圖所示：

2.2 準備資料

建立資料集 ds1，SQL 語句為：SELECT * FROM S訂單明細 limit 20

2.3 設計表格

1）點選組件列表欄中的「文字」，將「表格」組件拖入空白畫布中。

2）點選右側配置欄的「編輯組件」按鈕，即可進入組件編輯介面，如下圖所示：

3）進入組件編輯頁面後，如下圖設計表格組件：

2.4 設定擴展後排序

選中 A2 儲存格，如下圖設定升冪類型的擴展後排序，公式為：switch($a,0,"",1,eval($c)*-1,2,eval($c))

2.5 設定JavaScript超連結

1）選中 B1 儲存格，新增 JavaScript 腳本類型的超級連結，需要先設定 3 個參數，然後再寫 JavaScript 程式碼，如下圖所示：

新增的參數如下表所示：

JavaScript 程式碼如下，使用API refresh 實現表格傳參並重新整理：

if(a==null||b!=c||a.length==0)
{
duchamp.getWidgetByName("表格1_頁面1").refresh({a:1,b:b,c:b}) 
}
if(a==1&&b==c)
{
duchamp.getWidgetByName("表格1_頁面1").refresh({a:2,b:b,c:b}) 
}
if(a==2&&b==c)
{
duchamp.getWidgetByName("表格1_頁面1").refresh({a:'',b:b,c:b}) 
}

注：自己範本應用時，記得改程式碼裏面的表格組件名稱。

2）B1 儲存格設定好之後，也給 C1、D1、E1、F1 儲存格設定相似的超連結，除了參數 b 的值不一樣外，其他都相同。

C1、D1、E1、F1 儲存格 JavaScript 超連結參數 b 的值分別是：c2、d2、e2、f2，以 C1 儲存格為例：

最終表格如下圖所示：

2.6 效果預覽

2.6.1 PC 端

儲存範本，點選右上角「預覽」按鈕，效果同本文 1.1 節。

2.6.2 行動端

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

點選下載範本：特殊多欄排序.fvs