Jim的博客
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);
    }
}