1. 概述
1.1 問題描述
如果我們對報表設置了隔行變色（隔行/列設置背景色），又設置了條件屬性來隐藏行高，那麽原本的隔行變色看起來會很混亂。
例如，隔行變色在隐藏了「運貨商」爲 1 的行後效果如圖：
如何實現隐藏行後依舊保持隔行變色呢？
1.2 解決思路
方案一：在設置背景色時利用公式 IF()，如果隐藏行的條件成立，被隐藏行不執行隔行變色的條件，否則就執行。
方案二：在「模板>模板 Web 屬性>分頁預覽設置」中添加「加載結束」事件，利用 JavaScript 代碼實現。
2. 示例
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 端均支持，效果如下圖所示：
3. 決策報表JS示例
相同效果想要在決策報表中使用 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端預覽」，效果如下圖所示：
注：不支持移動端。
4. 模板下載
已完成模板可參見：
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行後隔行設置背景色.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行後隔行設置背景色-JS.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\隐藏行後隔行設置背景色-JS.frm
點擊下載模板：
