JS實現決策報表中點擊标題排序

1.1 問題描述

根據點擊次數奇偶性排序之數值型、多列排序 文檔中實現了報表動态排序，即根據參數值的不同來決定報表按某列升序還是降序排列，我們也可以利用 JS 來實現此效果。如下圖所示：

1.2 實現思路

給單元格添加超鏈接，超鏈接中 JS 動态改變參數值，報表數據列根據參數值實現升序或降序排列。

2.1 準備模板

1）新建決策報表，新建數據集ds1，SQL語句爲：SELECT * FROM 訂單 limit 15

2）在 body 中拖入一個報表塊，新建決策報表并拖入報表塊，編輯報表塊，将訂單 ID 字段拖入報表塊 A3 單元格，A1單元格輸入公式 $a，設置報表樣式如下圖所示：

2.2 添加超鏈接

右擊報表塊 A2 單元格，爲其添加一個「超級鏈接」，鏈接類型選擇「JavaScript腳本」，其中需要添加一個參數 a，值爲公式：if($a = 1, 0, 1)。如下圖所示：

JavaScript 代碼如下：

//獲取report0報表塊
var re = _g().getWidgetByName("report0");
//獲取參數值後加載報表
re.gotoPage(1, "{a:" + a + "}", true);

2.3 設置排序

雙擊 A3 單元格，選擇「高級」，在排序順序處選擇「升序」，公式值爲if($a==1,$$$,-$$$)，如下圖所示：

2.4 效果預覽

2.4.1 PC端

保存模板，點擊「PC端預覽」，預覽效果如下圖所示：

2.4.2 移動端

App 及Html5 效果如下圖所示：

3.1 準備模板

1）新建決策報表，新建數據集ds1，SQL 語句爲：SELECT EMPID,EMPNAME,BIRTHDATE,HEIGHT FROM EMPLOYEE limit 10

2）在 body 中拖入一個報表塊，新建決策報表并拖入報表塊，編輯報表塊，如下圖所示設置報表樣式。

3.2 添加超鏈接

1）右擊報表塊 A2 單元格，爲其添加一個「超級鏈接」，鏈接類型選擇「JavaScript腳本」，其中需要添加參數 a、flag。如下圖所示：

參數 a 的值爲 if($a = 1, 0, 1)，參數 flag 的值爲1 。

JavaScript 代碼如下：

//獲取report0報表塊
var re = _g().getWidgetByName("report0");
//獲取參數值後加載報表
re.gotoPage(1, "{a:" + a + ",flag:" + flag + "}", true);

如果遇到只有第一次點擊可以生效的超鏈，可能是參數 a 只能獲取到第一次，此時需要修改參數 a 的賦值方式。如下圖所示:

var a = "${a}";
a = a == "1" ? 0 : 1;

2）同樣的方法，給 D2 單元格添加「超級鏈接-JavaScript腳本」，其中有兩個參數 b、flag，如下圖所示：

JavaScript 代碼如下：

//獲取report0報表塊
var re = _g().getWidgetByName("report0");
//獲取參數值後加載報表
re.gotoPage(1, "{b:" + b + ",flag:" + flag + "}", true);

注：給 ID 和身高分别設置 JS 給報表塊 report0 傳參，在這裏用 a,b 和 flag 參數值來區分點擊的是哪一個标題，點擊的次數。

3.3 設置排序

選擇 A3 單元格，在擴展後排序處選擇「升序」，公式值爲if($flag = 1, if($a = 1, A3, -A3), if($b = 1, D3, -D3))，如下圖所示：

注：通過 if 語句，對 flag 值進行判斷，然後再對 a,b,c 的參數值進行判斷實現對應按照哪個單元格數據進行排序。

3.4 設置公式

若超鏈的 A3 單元格是字符串類型的數字，如果要排序需要把它轉換成數字類型的，雙擊 A3 單元格，點擊「高級」，在自定義顯示中，将值改爲公式：TOINTEGER($$$)。如下圖所示：

如果需要排序的是日期類型的數據，用 tointeger(format(I2, "yyyyMMddHHmmss") 把它轉換成數字類型的進行排序。

3.5 效果預覽

3.5.1 PC端

保存模板，點擊「PC端預覽」，效果如下圖所示：

3.5.2 移動端

App 及Html5 效果如下圖所示：

示例一：單列排序

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\11-JS實現決策報表中點擊标題排序-示例一.frm

點擊下載文件：11-JS實現決策報表中點擊标題排序-示例一.frm

示例二：多列排序

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\11-JS實現決策報表中點擊标題排序-示例二.frm

點擊下載文件：11-JS實現決策報表中點擊标題排序-示例二.frm