FineReport11 报表技巧02- 实现类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");