帆软决策报表嵌入html,JS实现决策报表参数界面自动查询

2.1 准备模板

1)新建一张决策报表,新增数据集 ds1,SQL 语句为:SELECT * FROM 销量 where 地区='${地区}',其中有一个数据集参数「地区」。如下图所示:

618df899ddd136fc28cf88fb9931b706.png

2)在 body 中添加参数面板和一个报表块 report0。如下图所示:

eeaef080e47660a5e58c2e4153882aff.png

3)在「地区」参数添加在参数面板中,控件类型选择「下拉框控件」。如下图所示:

d4393b8ca74f1c010251930c9de13ea9.png

4)选中下拉框控件,在「组件设置>属性>数据字典」处为「下拉框控件」绑定数据字典。类型选择「数据库表」,数据库为 「FRDemo」,数据表为「销量」,实际值与显示值的列名都选择「地区」。如下图所示:

2ead00d64ec67689d09f390683fef9e5.png

5)点击报表块 report0,编辑 report0,将数据集字段拖入单元格中,设计报表样式。如下图所示:

b286d31700856be02b44f3fb2fa7fd34.png

最终模板如下图所示:

14b350f9a6b8f7b3f58ec60238143708.png

2.2 添加事件

点击参数面板上的「地区」下拉框控件,在「组件设置>事件」处为其添加一个「编辑后」事件,实现控件选择值后触发查询,不点击「查询」按钮即可展现报表。如下图所示:

708e663afae0afc8d6dc6d5ef7f75978.png

JavaSccript 代码如下:_g().parameterCommit();

注:移动端需要将 JS 添加到编辑结束事件中。

2.3 预览效果

保存模板,点击「PC端预览」,地区下拉框选择地区后,不用点击查询按钮,报表即呈现。 PC 端效果如下图所示:

bea5a3d49154b57acd029cd2f13ad2da.gif

App 及 HTML5 效果如下图所示:

cd8fa1e8fc58eb5c8b6849871e43d3aa.gif

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值