FineReport11 報表技巧02- 實現類Excel表頭篩選功能

呼啾~發表於2024-04-19
Excel

背景：

在報表開發中，有的需求方用習慣Excel的表頭篩選時，就不太習慣帆軟的特意點選報表控制元件進行篩選，希望報表篩選方式可以類似Excel那種直接在表頭進行篩選的功能
最終效果如下：

實現步驟：

1.1、資料集準備
產品資訊表：

SELECT 客戶,產品,數量,cast(下單時間 as date) as 下單時間,下單使用者 FROM `下單記錄表`
where 1=1
${if(len(產品)==0,"","and 產品 in ('"+產品+"')")}
${if(len(下單時間)==0,"","and cast(下單時間 as date) in ('"+下單時間+"')")}

需要對產品進行篩選，所以需要產品維度表：
SELECT distinct 產品 FROM 下單記錄表``

1.2、填充表內容
表頭內容為：客戶名、產品、數量、下單時間，並將資料表內欄位拉至對應表頭下一行進行資料填充

1.3、設定產品控制元件
控制元件型別為下拉框複選控制元件，內容來源資料字典：產品表產品欄位，注意因為是多選控制元件，返回值型別的分隔符一定要改成','

此時預覽報表效果如下：

1.4、新增列控制元件
在“產品”列後新增一列，並選中新增列表頭，選擇新增下拉核取方塊控制元件，將產品查詢加至資料字典中，同時合併B2、C2兩個單元格

1.5、新增編輯結束事件
我們點選選擇單元格控制元件的值後，是需要將該值傳遞給上一步中配置的引數欄控制元件，然後進行引數查詢，所以我們需要給單元格中的控制元件增加一個編輯結束事件

// 將控制元件的值傳遞給引數控制元件。
_g().getParameterContainer().getWidgetByName("產品").setValue(this.getValue());
// 提交引數查詢
_g().parameterCommit();

1.6、進行填報頁面設定
進入模板Web屬性-填報頁面設定-關閉未提交離開提示-開啟直接顯示控制元件-關閉使用工具欄

預覽方式改為“填報預覽”進行效果預覽，此時效果如下，可以看到產品表頭旁倒三角標可點選進行產品篩選：

1.7、美觀完善
截至此步已經實現類似Excel那種直接在表頭進行篩選的功能，為了觀感更好，需要進行以下操作：
①、去除控制元件的邊框
②、去除input邊框並將其寬度設定為0進行隱藏
③、將表格區域提到頁面頂部，並動態調整其高度
④、將引數欄隱藏
⑤、調整控制元件下拉按鈕背景
⑥、將對應引數控制元件的值賦值給下控制元件所在單元格
⑦、去除左上角紅色角標
進入模板Web屬性-填報頁面設定-新增事件-新增載入結束後事件

具體指令碼及解釋如下：

// 去除控制元件的邊框
$(".fr-trigger-btn-up").css("border", "none");
// 去除input邊框並將其寬度設定為0進行隱藏
$(".fr-trigger-text.fr-border-box").css({ "border": "none", "width": "0px" });
// 判斷表格區域的高度加上引數欄高度是否大於瀏覽器高度
if ($(".content-container").height() + $(".parameter-container").height() <= window.innerHeight) {
  // 將表格區域提到頁面頂部，並動態調整其高度
  $(".content-container").css({ "top": "0px", "height": $(".content-container").height() + $(".parameter-container").height() + "px" });
  $("#frozen-center").css({ "height": $("#frozen-center").height() + $(".parameter-container").height() + "px" });
}
// 將引數欄隱藏
//$(".parameter-container").hide();
// 調整控制元件下拉按鈕背景
$(".fr-trigger-btn-up").css("background", "none");
// 將對應引數控制元件的值賦值給下控制元件所在單元格
_g().setCellValue("C1", _g().getParameterContainer().getWidgetByName("產品").getValue());
// 去除左上角紅色角標
$(".dirty").removeClass("dirty");

至此，實現效果。

相關文章