ActiveReports V15 新特性—全面支持自定义参数面板
本帖最后由 Lenka.Guo 于 2021-1-19 09:42 编辑报表不仅用于数据展示，如果在大数据量的报表加载和展示下，需要对用户提供输入和进行数据过滤后，再去加载相关的数据。
ActiveReports V15 带来了新的强大的功能，为开发人员提供了自定义的参数面板的功能，可以只支持参数面板的显示位置，以及各个筛选条件。此种方法对于报表设计者来说非常方便，免去了设计查询面板的步骤；省去了参数关联逻辑处理等问题。
1. 自定义参数查询面板流程
[*]定义参数并创建数据过滤。在报表中定义报表参数并将其应用于报表数据过滤中。
[*]添加控件并绑定参数。在查询面板设计界面中添加合适的查询控件并与报表参数绑定，使最终用户可以通过控件输入参数值实现报表数据过滤。
[*]外观调整。设置控件外观属性，完成定制需求。
2. 第一个自定义查询面板
第1步：新建报表并添加报表参数
新建报表，使用“空白RDL报表”打开报表设计器。从需求来看，需要添加三个参数来确定所需数据。即订单的开始日期、截止日期和销售大区。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_14-19-13.png?version=1&modificationDate=1600159674000&api=v2
第2步：添加数据集并使用参数过滤将报表参数传入数据集内部的查询参数。并将查询参数名称修改为“开始”、“截止”以及“大区”，如下。SQL查询语句为：select * from 销售明细 where DateDiff (d, @开始, 订购日期) >= 0 and DateDiff (d, @截止, 订购日期) <= 0 and 销售大区=@大区https://help.grapecity.com.cn/download/attachments/50750791/image2020-11-4_9-18-17.png?version=1&modificationDate=1604452697000&api=v2
第3步：设计报表内容https://help.grapecity.com.cn/download/attachments/50750791/image2020-11-4_9-24-59.png?version=1&modificationDate=1604453099000&api=v2
此时预览报表，可见已经可以用默认的查询面板查询数据。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_14-42-23.png?version=1&modificationDate=1600159674000&api=v2
第4步：自定义查询面板为了使查询面板更加美观易用，接下来我们进行自定义查询面板。回到报表设计器后，单击顶部的“查询面板”菜单，切换至查询面板设计界面，开始设计查询面板。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_17-38-28.png?version=1&modificationDate=1600159674000&api=v2
1) 添加第一个控件。单击左侧工具栏中的日期范围控件，将其添加到设计区。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_17-46-32.png?version=1&modificationDate=1600159674000&api=v2
为控件绑定参数。单击控件旁的红色方块，选择“开始日期”和“截止日期”，以完成参数绑定。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_17-51-37.png?version=1&modificationDate=1600159674000&api=v2
设置控件属性。比如将标题文本改为“请选择起止时间”。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_17-59-13.png?version=1&modificationDate=1600159674000&api=v2
2) 添加第二个控件。通过单击或拖拽的方式添加文本框控件。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_18-16-4.png?version=1&modificationDate=1600159674000&api=v2
为文本框控件绑定参数。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_18-17-39.png?version=1&modificationDate=1600159674000&api=v2
设置控件属性。比如将标题文本改为“请输入大区名称”。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_18-19-10.png?version=1&modificationDate=1600159674000&api=v2
3) 添加按钮控件。按钮控件无需绑定参数，这里我们将按钮的标题文本改为“查询”。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_18-21-41.png?version=1&modificationDate=1600159674000&api=v2
第5步：预览报表可见，完成了查询面板的定制工作。如此定制之后，更有利于引导用户使用报表。https://help.grapecity.com.cn/download/attachments/50750791/image2020-5-20_18-23-30.png?version=1&modificationDate=1600159674000&api=v2
注意： 自定义参数面板只在在线设计器中提供； 默认JSViewer 面板的位置局左；如需放置在顶部，需要添加代码：JSViewer 指定参数面板代码：parametersPanel: { location: 'top' }
下载WebSamples15运行,为何参数还是在左侧,无法到顶端?好像有个参数设置的,建议在文档中更新,谢谢! JSViewer 指定参数面板代码：parametersPanel: { location: 'top' }
完整代码：
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
parametersPanel: { location: 'top' }
});
localize();
populateReports();
}
设计器 JSVIEWER 代码
designerOptions.openViewer = function (options) {
if (viewer) {
viewer.openReport(options.reportInfo.id);
return;
}
viewer = GrapeCity.ActiveReports.JSViewer.create({
locale: options.locale,
element: '#' + options.element,
reportService: {
url: 'api/reporting',
},
reportID: options.reportInfo.id,
settings: {
zoomType: 'FitPage'
},
parametersPanel: { location: 'top' }
});
};
哈哈,给力,感谢 :hjyzw: Bug：在查询面板定义了版式以及预览按钮，在运行时预览按钮会变为“Preview”，在自定义语言中好像也无法调整。
另外，提个建议，将查询面板挪到上方后，左边的查找和导出按钮看起来放左边意义也不大了，有机会再组件中都默认挪到上面吗？谢谢。 你好
第一个问题，预览按钮，变为Preview这个应该是汉化么有完全汉化完整导致的
第二个问题，这是一个需求问题，这个我们需要先就你提出的建议进行一个内部探讨，如果合理后期会进行改进
页:
[1]