隱藏列後隔列變色

1.1 問題描述

如果我們對報表設定了隔列變色（隔列/欄設定背景色），又設定了條件屬性來隱藏列高，那麼原本的隔列變色看起來會很混亂。

例如，隔列變色在隱藏了「運貨商」為 1 的列後效果如圖：

如何實現隱藏列後依舊保持隔列變色呢？

1.2 解決思路

方案一：在設定背景色時利用公式 IF()，如果隱藏列的條件成立，被隱藏列不執行隔列變色的條件，否則就執行。

方案二：在「範本>範本 Web 屬性>分頁預覽設定」中新增「載入結束」事件，利用 JavaScript 程式碼實現。

2.1 準備範本

開啟範本%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隔列設定背景色.cpt

2.2 隱藏列

選中 E2 儲存格，新增條件：當運貨商等於 1 時，列高為 0。屬性下拉選擇「列高」，條件類型為「普通」，條件設定為「等於字串 1」，完成後點選「增加」。步驟如下圖所示：

2.3 方案一：設定背景色

將 A2 儲存格「條件屬性>背景」設定中的公式修改為：IF(E2!=1,SEQ()%2=0,FALSE)

2.4 方案二：新增載入結束事件

1）設定隱藏列後，將 A2 儲存格原本的「條件屬性」刪掉。

2）點選菜單欄「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」。在頁面下方事件設定處，點選「新增」按鈕，選擇「載入結束」事件，在彈出的事件設定對話框中輸入 JavaScript 程式碼如下：

$(".x-table tr:visible").each(function(i) {
if (i % 2 == 0 && i >= 1) {
$(this).css("background-color", "#ccccfd");
}
});

注：其中，i>=1 中的 1，是由開始變色的儲存格所在列數減 1 得來的。

步驟如下圖所示：

2.5 效果預覽

PC 端

儲存報表，點選「分頁預覽」，效果如下圖所示：

行動端

方案二新增「載入結束」事件不支援行動端，方案一 App 端和 H5 端均支援，效果如下圖所示：

相同效果想要在決策報表中使用 JS 事件實現，該怎麼做呢？

注：本方案只適用於舊版決策報表，新版決策報表不適用 。

3.1 製作範本

建立決策報表，在決策報表中拖入一個報表塊，報表塊中表格設計同上述範本一致。並在 E2 儲存格新增相同的條件屬性，A2 儲存格不設定條件屬性。

3.2 新增初始化後事件

選中報表塊，在右側面板中點選「事件」，新增「初始化後」事件，輸入 JavaScript 程式碼如下：

setTimeout(function() {
$(".x-table tr:visible").each(function(i) {
if (i % 2 == 0 && i >= 1) {
$(this).css("background-color", "ccccfd");
}
});
}, 1000);

步驟如下圖所示：

3.3 效果預覽

儲存報表，點選「PC端預覽」，效果如下圖所示：

注：不支援行動端。

點選下載範本：

隱藏列後隔列設定背景色.cpt

隱藏列後隔列設定背景色-JS.cpt

隱藏列後隔列設定背景色-JS.frm