JS實現分組內儲存格無邊框

1

版本。

2

預期效果。

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

3

實現思路。

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

1

準備範本。

1. 建立範本，新增資料集 ds1，SQL 語句為： 【SELECT 地區,銷售員,産品||'（銷量）'||銷量 as 業績 FROM 銷量 where 地區='華東'】，如下圖1所示。

2. 將資料拖入對應的儲存格中，範本設定如下圖2所示。

3. 設定邊框。選中 C2 儲存格，去掉 C2 儲存格的上下邊框，保留左右邊框。如下圖3所示。

4. 選中 D2 儲存格，設定左父格為 B2 ，選擇儲存格屬性，插入公式 ：【COUNT(C2) + D2[B2:-1]】，然後隱藏 D 列。其中【 COUNT(C2)】計算組內儲存格數量，【D2[B2：-1] 】表示獲取上一個 B2 儲存格所對應的 D2 的值。公式作用為記錄截止到每一組最後一個的儲存格數量。如下圖4所示。

2

設定邊框。

1. 第二章第1節中已取消了 C2 儲存格的上下邊框，並且記錄了截止每一組最後一個儲存格的儲存格數量，接下來就需要透過這個數量，加上對應的組邊框。即給每一組的第一個儲存格加上邊框或給每一組最後一個儲存格加下邊框。可透過兩種方式實現：條件屬性或新增 JS 代碼。

2. 條件屬性：選擇 C2 儲存格，點選【條件屬性】→【新增條件】→【屬性】→【邊框】→【編輯】，只新增下邊框，公式條件型別選擇【公式】，公式為：【ROW()=D2+1】。如下圖1所示。

3. JS 方法實現：若不用條件屬性，也可以透過新增 JS 事件實現。

4. 選擇【範本】→【範本web屬性】→【分頁預覽設定】，為該範本單獨設定，並新增【載入結束】事件，如下圖2所示。

5. JavaScript 代碼如下：

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

注：此方法不支援行動端。

3

效果預覽。

1. PC 端：儲存範本，點選分頁預覽，效果如下圖1所示。

2. 行動端：App 及 HTML5 效果如下圖2所示。

注：JS 實現方法不支援行動端。

1. 已完成範本，可參見%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\GroupReport\分組內儲存格無邊框.cpt。

2. 點選下載範本：分組內儲存格無邊框.cpt