Finereport11 类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,操作更方便哦

如果您在阅读或实际操作过程中有问题,可以随时添加作者好友进行咨询。

热门相关:校花之高手无敌   大唐杨国舅   重生豪门宠婚:枭宠不乖娇妻   美食萌后:皇上,喂不饱!   神秘复苏