Finereport11 類Excel篩選

次世代数据技术發表於2024-03-28
Excel

微信公眾號：次世代資料技術
關注可瞭解更多的教程。問題或建議，請公眾號留言或聯絡本人;
微訊號：weibw162
本教程影片講解可以關注本人B站賬號進行觀看：weibw162

一、需求描述

在使用FIneReport軟體開發時，我們希望前臺報表展示時可以類似Excel表格篩選那樣，在表頭進行多選篩選過濾顯示資料。其效果如下圖所示：

針對以上需求，本文提出一種可行的方案，其大致步驟如下：

  1. 在原表需過濾欄位後面增加一個單元格放置下拉框。
  2. 將下拉框的字典配置為該欄位的去重列表。
  3. 下拉框編輯結束時將值傳遞給指定的引數控制元件，並提交查詢。
  4. 使用填報預覽，可以直接在單元格中使用控制元件。
  5. 在頁面初始化時透過JS調整前臺樣式，隱藏引數欄等。

注1：不支援移動端填報。
注2：本文涉及到的技術及流程均僅在FineReport 11.0 版本進行實際驗證，如果您在使用其他版本過程中出現問題可以聯絡本作者。

二、具體操作

第一步

示例所需資料集，如下：

-- ds1 資料集
select 訂單ID,substr(訂購日期,0,11) as 訂購日期,客戶ID,僱員ID,運貨商,運貨費,貨主名稱,貨主地址

from S訂單
where 1=1
${if(len(訂單ID)==0,"","and 訂單ID in ('"+訂單ID+"')")}
${if(len(訂購日期)==0,"","and substr(訂購日期,0,11) in ('"+訂購日期+"')")}
limit 50

-- 引數 訂單ID資料集
select distinct 訂單ID from S訂單

-- 引數訂購日期資料集
select distinct substr(訂購日期,0,11) as 訂購日期 from S訂單

其引數控制元件也皆在引數欄方式好，配置好。

第二步

開啟模板，在模板需要調整的欄位右側增加單元格用來存放下拉框控制元件，同時將下方資料表欄位和右側的空白單元格進行合併。

同時，需要調整單元格的對齊及邊框，使其儘可能像是在同一個單元格中。
值得注意的是，下拉框的單元格要稍小一些，否則容易造成圖示的錯位，同時，下拉框所在的單元格要設定成不自動調整。

第三步

給控制元件配置其資料字典。並調整控制元件返回的資料型別為字串，且分隔符同時調整為','。

第四步

給控制元件增加一個編輯結束事件，並寫入如下程式碼：

JavaScript 程式碼如下：

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

第五步

點選左上角 模板->模板web屬性->填報頁面設定->事件設定 中增加載入結束事件，並寫入如下JavaScript指令碼。同時，需要將直接顯示控制元件選項勾選，將使用工具欄取消勾選。

JavaScript 程式碼如下：

// 去除控制元件的邊框
$(".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("訂單ID").getValue());
_g().setCellValue("E1", _g().getParameterContainer().getWidgetByName("訂購日期").getValue());
// 去除左上角紅色角標
$(".dirty").removeClass("dirty");

第六步

透過拖拽將整個引數欄隱藏

第七步

將para元件下的點選查詢前不顯示報表內容取消勾選。

完成以上步驟後，我們直接點選左上角的選擇填報預覽按鈕，即可在瀏覽器中檢視到與文章開頭效果圖類似的報表。

三、模板檔案下載

連結: https://pan.baidu.com/s/1MkSKGONyM9iSAeTAxoAD1w?pwd=x42e 提取碼: x42e 複製這段內容後開啟百度網盤手機App，操作更方便哦

如果您在閱讀或實際操作過程中有問題，可以隨時新增作者好友進行諮詢。

相關文章