ActiveReports V15 新特性—全面支持自定义参数面板

报表不仅用于数据展示，如果在大数据量的报表加载和展示下，需要对用户提供输入和进行数据过滤后，再去加载相关的数据。
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' }

下载WebSamples15运行,为何参数还是在左侧,无法到顶端?好像有个参数设置的,建议在文档中更新,谢谢!

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.         };

复制代码

哈哈,给力,感谢

Bug：在查询面板定义了版式以及预览按钮，在运行时预览按钮会变为“Preview”，在自定义语言中好像也无法调整。

另外，提个建议，将查询面板挪到上方后，左边的查找和导出按钮看起来放左边意义也不大了，有机会再组件中都默认挪到上面吗？谢谢。

你好
第一个问题，预览按钮，变为Preview这个应该是汉化么有完全汉化完整导致的

第二个问题，这是一个需求问题，这个我们需要先就你提出的建议进行一个内部探讨，如果合理后期会进行改进