0%

DevExpress Reporting - JavaScript Client中实现子报表跳转

背景

前篇博文介绍了DevExpress Reporting在ASP.NET Core服务端中实现自定义扩展的用例,本篇博文将分享一个在JavaScript客户端中实现报表间跳转、返回的方法。

思路

对于DocumentViewer,DevExpress的JavaScript包提供了若干种事件的回调钩子,其中一个名为PreviewClick的回调可以用于实现自定义的跳转逻辑。另外我们将利用另一个事件DocumentReady实现返回后自动滚动至跳转前的页数的逻辑。

编码

  1. 在我们引入DevExpress Reporting时创建的viewerOptions中,添加PreviewClick回调函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
PreviewClick: function (s, e) {
var brick = e.Brick;
var navigationUrl = brick && brick.navigation && brick.navigation.url;
var navigationTarget = brick && brick.navigation && brick.navigation.target;

if (navigationTarget && navigationTarget.trim().toUpperCase() === 'REPORT' && navigationUrl) {
var reportPreview = s.GetReportPreview();
var isBack = navigationUrl.trim().toUpperCase() === 'BACK';
var navigateInfo = {
ReportUrl: navigationUrl,
IsBack: isBack,
SourcePageIndex: isBack ? null : s.GetCurrentPageIndex()
};

reportPreview.drillThrough(JSON.stringify(navigateInfo));
e.Handled = true;
}
}

博主在这段代码中,默认支持报表在设计时,通过指定Navigation Url为报表数据Url,Navigation Target为”Report”或”Back”(大小写不敏感),以支持非常简单的跳转/返回设置。

  1. 当从多页报表中跳转到子报表后需要返回至原页,我们可通过一个在后端保存并传递的报表参数在DocumentReady回调中获取原页数。博主在这里使用PageIndex作为参数名。后端的具体逻辑可参考上篇博文DevExpress Reporting - ASP.NET Core项目中实现参数校验
1
2
3
4
5
6
7
8
9
10
11
DocumentReady: function (s, e) {
var previewModel = s.GetPreviewModel();
var parametersModel = s.GetParametersModel();
var pageIndexParameter = parametersModel.serializeParameters().find(p => p.Key === 'PageIndex');

if (pageIndexParameter) {
setTimeout(() => {
previewModel.GoToPage(Math.max(pageIndexParameter.Value, 0));
}, 200);
}
}