请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lenka.Guo 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-12-31 15:27  /   查看:104  /  回复:5
本帖最后由 Lenka.Guo 于 2021-1-19 09:42 编辑

报表不仅用于数据展示,如果在大数据量的报表加载和展示下,需要对用户提供输入和进行数据过滤后,再去加载相关的数据。
ActiveReports V15 带来了新的强大的功能,为开发人员提供了自定义的参数面板的功能,可以只支持参数面板的显示位置,以及各个筛选条件。此种方法对于报表设计者来说非常方便,免去了设计查询面板的步骤;省去了参数关联逻辑处理等问题。


1. 自定义参数查询面板流程
  • 定义参数并创建数据过滤。在报表中定义报表参数并将其应用于报表数据过滤中。
  • 添加控件并绑定参数。在查询面板设计界面中添加合适的查询控件并与报表参数绑定,使最终用户可以通过控件输入参数值实现报表数据过滤。
  • 外观调整。设置控件外观属性,完成定制需求。





2. 第一个自定义查询面板
第1步:新建报表并添加报表参数
新建报表,使用“空白RDL报表”打开报表设计器。
从需求来看,需要添加三个参数来确定所需数据。即订单的开始日期、截止日期和销售大区。


第2步:添加数据集并使用参数过滤
将报表参数传入数据集内部的查询参数。并将查询参数名称修改为“开始”、“截止”以及“大区”,如下。
SQL查询语句为:
select * from 销售明细 where DateDiff (d, @开始, 订购日期) >= 0 and DateDiff (d, @截止, 订购日期) <= 0 and 销售大区=@大区

第3步:设计报表内容

此时预览报表,可见已经可以用默认的查询面板查询数据。


第4步:自定义查询面板
为了使查询面板更加美观易用,接下来我们进行自定义查询面板。
回到报表设计器后,单击顶部的“查询面板”菜单,切换至查询面板设计界面,开始设计查询面板。

1) 添加第一个控件。单击左侧工具栏中的日期范围控件,将其添加到设计区。

为控件绑定参数。单击控件旁的红色方块,选择“开始日期”和“截止日期”,以完成参数绑定。

设置控件属性。比如将标题文本改为“请选择起止时间”。

2) 添加第二个控件。通过单击或拖拽的方式添加文本框控件。

为文本框控件绑定参数。

设置控件属性。比如将标题文本改为“请输入大区名称”。

3) 添加按钮控件。按钮控件无需绑定参数,这里我们将按钮的标题文本改为“查询”。

第5步:预览报表
可见,完成了查询面板的定制工作。如此定制之后,更有利于引导用户使用报表。


注意: 自定义参数面板只在在线设计器中提供; 默认JSViewer 面板的位置局左;如需放置在顶部,需要添加代码:JSViewer 指定参数面板代码:parametersPanel: { location: 'top' }


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

5 个回复

倒序浏览
LoveBaby
注册会员   /  发表于:5 天前
沙发
下载WebSamples15运行,为何参数还是在左侧,无法到顶端?好像有个参数设置的,建议在文档中更新,谢谢!

评分

参与人数 1金币 +500 收起 理由
Lenka.Guo + 500 非常好的建议!

查看全部评分

回复 使用道具 举报
Lenka.Guo讲师达人认证 悬赏达人认证
超级版主   /  发表于:5 天前
板凳
JSViewer 指定参数面板代码:parametersPanel: { location: 'top' }



完整代码:

  1. function loadViewer() {
  2.       viewer = GrapeCity.ActiveReports.JSViewer.create({
  3.           element: '#viewerContainer',
  4.           parametersPanel: { location: 'top' }
  5.       });
  6.       localize();
  7.       populateReports();
  8.     }
复制代码


设计器 JSVIEWER 代码

  1. designerOptions.openViewer = function (options) {
  2.             if (viewer) {
  3.                 viewer.openReport(options.reportInfo.id);
  4.                 return;
  5.             }
  6.             viewer = GrapeCity.ActiveReports.JSViewer.create({
  7.                 locale: options.locale,
  8.                 element: '#' + options.element,
  9.                 reportService: {
  10.                     url: 'api/reporting',
  11.                 },
  12.                 reportID: options.reportInfo.id,
  13.                 settings: {
  14.                     zoomType: 'FitPage'
  15.                 },
  16.                     parametersPanel: { location: 'top' }
  17.             });
  18.         };
复制代码



回复 使用道具 举报
LoveBaby
注册会员   /  发表于:5 天前
地板
哈哈,给力,感谢

评分

参与人数 1金币 +500 收起 理由
Lenka.Guo + 500 赞一个!

查看全部评分

回复 使用道具 举报
Lenka.Guo讲师达人认证 悬赏达人认证
超级版主   /  发表于:5 天前
5#
回复 使用道具 举报
LoveBaby
注册会员   /  发表于:3 天前
6#
Bug:在查询面板定义了版式以及预览按钮,在运行时预览按钮会变为“Preview”,在自定义语言中好像也无法调整。

另外,提个建议,将查询面板挪到上方后,左边的查找和导出按钮看起来放左边意义也不大了,有机会再组件中都默认挪到上面吗?谢谢。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册