JS實現分組内單元格無邊框

1.1 預期效果

在設計分組報表的時候，希望相同分組内的報表沒有邊框，不同分組之間有邊框，如下圖所示（左邊是原格式，右邊是需求格式）：

1.2 實現思路

利用條件屬性或者 JS 來控制組内邊框顯示與否。

2.1 準備模板

1）新建模板，添加數據集 ds1，SQL 語句爲 SELECT 地區,銷售員,産品||'（銷量）'||銷量 as 業績 FROM 銷量 where 地區='華東'

2）将數據拖入對應的單元格中，模板設置如下：

3）設置邊框。選中 C2 單元格，去掉 C2 單元格的上下邊框，保留左右邊框。如下圖所示：

4）選中 D2 單元格，設置左父格爲 B2(銷售員)，并寫上逐層累計公式 COUNT(C2) + D2[B2:-1]，累計業績 (C2) 的條數，然後隐藏 D 列。如下圖所示：

COUNT(C2) 計算組内單元格數量，D2[B2：-1] 表示獲取上一個 B2 單元格所對應的 D2 的值。公式作用爲記錄截止到每一組最後一個的單元格數量。

2.2 設置邊框

2.1 節中已取消了 C2 單元格的上下邊框，并且記錄了截止每一組最後一個單元格的單元格數量，接下來就需要通過這個數量，加上對應的組邊框。即給每一組的第一個單元格加上邊框或給每一組最後一個單元格加下邊框。

可通過兩種方式實現如上加邊框的操作，條件屬性或添加 JS 實現。

2.2.1 條件屬性

選擇 C2 單元格，點擊條件屬性>添加條件>屬性>邊框>編輯，只添加下邊框，如下圖所示：

2.2.2 JS 方法實現

若不用條件屬性，也可以通過添加 JS 事件實現。

選擇模板>模板web屬性>分頁預覽設置，爲該模板單獨設置，并添加加載結束事件，如下圖所示：

JavaScript 代碼如下：

注：此方法不支持移動端。

//找到 D2 單元格中值對應行，添加下邊框，其中[id^=D] 表示選中 D 列單元格
$("[id^=D]").each(function(){  
    $("#r-"+$(this).text()+"-0").css("border-bottom","1px solid black");  
})

2.3 效果預覽

2.3.1 PC 端

保存模板，點擊分頁預覽，效果如下圖所示：

2.3.2 移動端

App 及HTML5 效果如下圖所示：

注：JS 實現方法不支持移動端。

已完成模板，可參見%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\分組内單元格無邊框.cpt。

點擊下載模板：分組内單元格無邊框.cpt