帆软决策报表嵌入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]。然而,基于专业知识,可以提供一份详细的报表使用教程概述。 ### 报表简介 报表是一款功能强大的商业智能工具,主要用于数据展示、分析以及报告生成。其核心产品 FineReport 提供了丰富的模板设计能力、灵活的数据源支持以及高效的性能优化方案。 --- ### 安装与配置 安装报表需要准备 Java 运行环境(JRE)。FineReport 支持多种操作系统,包括 Windows 和 Linux。以下是基本的安装流程: 1. 下载并解压 FineReport 的安装包。 2. 配置 `web.xml` 文件中的数据源连接参数。 3. 启动服务端程序,默认访问地址为 `http://localhost:8075/fine-report/`。 --- ### 数据源管理 报表支持多种类型的数据源,包括但不限于关系型数据库(MySQL、Oracle)、NoSQL 数据库(MongoDB、HBase),以及其他文件格式(CSV、Excel)。 ```sql -- MySQL 数据源示例 SQL 查询语句 SELECT id, name, age FROM users WHERE department = 'HR'; ``` 通过内置的设计向导,用户能够轻松完成复杂查询逻辑的构建,并将其绑定到报表单元格中[^2]。 --- ### 报表设计基础 报表采用拖拽式的界面操作方式,简化了用户的上手难度。主要模块如下: - **模板设计器**:用于创建自定义布局样式。 - **条件格式化**:实现动态高亮显示特定数值范围内的记录项。 - **图表组件**:嵌入柱状图、折线图等多种图形化表达形式辅助决策制定过程。 #### 示例代码片段 以下是一个简单的脚本函数演示如何计算两个日期之间的天数差值: ```javascript function calculateDateDifference(date1, date2){ var timeDiff = Math.abs(date2.getTime() - date1.getTime()); return Math.ceil(timeDiff / (1000 * 3600 * 24)); } ``` --- ### 发布与共享 完成本地调试之后,可将最终版本上传至服务器进行在线预览或者定时推送邮件通知相关人员查阅最新统计结果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值