Finereport11 类Excel筛选
微信公众号：次世代数据技术关注可了解更多的教程。题目或建议，请公众号留言或联系本人;
微信号：weibw162
本教程视频解说可以关注本人B站账号举行观看：weibw162
一、需求描述
在利用FIneReport软件开辟时，我们希望前台报表展示时可以雷同Excel表格筛选那样，在表头举行多选筛选过滤显示数据。其效果如下图所示：
http://qny.weibw162.com/FpvtIeDL8URBDYw_tix2rVKy5pJ-
针对以上需求，本文提出一种可行的方案，其大致步调如下：
[*]在原表需过滤字段后面增长一个单元格放置下拉框。
[*]将下拉框的字典设置为该字段的去重列表。
[*]下拉框编辑结束时将值传递给指定的参数控件，并提交查询。
[*]利用填报预览，可以直接在单元格中利用控件。
[*]在页面初始化时通过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订单其参数控件也皆在参数栏方式好，设置好。
http://qny.weibw162.com/FlBFScUm0gZSuq1NDZHIYRydn6C9
第二步
打开模板，在模板需要调整的字段右侧增长单元格用来存放下拉框控件，同时将下方数据表字段和右侧的空白单元格举行合并。
http://qny.weibw162.com/Fjorq2rEjxEagIsgWecjGXVKXsET
同时，需要调整单元格的对齐及边框，使其尽大概像是在同一个单元格中。
值得留意的是，下拉框的单元格要稍小一些，否则容易造成图标的错位，同时，下拉框所在的单元格要设置成不自动调整。
http://qny.weibw162.com/Fjf2LXuInjV5OaGkuPTVu6us17ZP
第三步
给控件设置其数据字典。并调整控件返回的数据范例为字符串，且分隔符同时调整为','。
http://qny.weibw162.com/FoP9kvDZghafnYGYdJc03q0hVQif
第四步
给控件增长一个编辑结束事件，并写入如下代码：
http://qny.weibw162.com/Fh2FLFEEQi8GWBfiW22yGZXOYwUS
JavaScript 代码如下：
// 将控件的值传递给参数控件。
_g().getParameterContainer().getWidgetByName("订单ID").setValue(this.getValue());
// 提交参数查询
_g().parameterCommit();第五步
点击左上角 模板->模板web属性->填报页面设置->事件设置 中增长加载结束事件，并写入如下JavaScript脚本。同时，需要将直接显示控件选项勾选，将利用工具栏取消勾选。
http://qny.weibw162.com/FnQFtctT8ylJzeIXWrihV8imuTtw
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()
页:
[1]