半岛外围网上直营

Telerik Reports 是 Progress Telerik 推出的专业报表工具，支持 .NET、ASP.NET Core、Blazor、Angular 等多种平台，帮助开发者快速创建、设计和集成交互式报表。它提供丰富的设计器、灵活的数据源支持以及强大的导出功能（PDF、Excel、Word 等），适用于企业应用、数据分析和可视化展示场景，让报表开发和管理更加高效便捷。

Telerik Report Viewer 允许您直接在承载页面（ASP.NET Core 页面）中管理报表，并让页面根据用户与报表的互动作出响应。

获取Telerik Reports最新版下载

Telerik_KendoUI技术交流群（QQ）：726377843

虽然 Progress Telerik Reporting 中的各种报表设计器能让您实现炫酷操作，但最终，报表会以 TRDP 文件形式保存（实际上是一个声明性 XML 文档），并可能由组织的 Report Server 提供服务（本文即假设采用该方式）。

Telerik 报表本质上还是具有高度交互性的。例如，您可以通过任何 Report Designer 创建一个报表，让用户选择他们希望查看的数据（通过 UI 中显式选择过滤条件，或在报表中选择显示项），而这类操作完全可以通过拖拽和设置报表选项来声明式完成，无需编写代码。

然而，更进一步的交互是：让报表与承载它的页面互相响应。可表现为：

• 承载报表的页面根据用户与报表的交互进行响应；
• 报表根据用户在承载页面的交互做出响应。

实现这两种交互形式虽需要编码，但您可以声明式地启动该过程。

设置（Setting Up）

本文使用 HTML 与 JavaScript 构建如下结构：

• HTML div元素来保存报表
• HTML样式元素，并使用CSS属性来控制报表的外观
• JavaScript对div元素ID的引用
• 一个名为 loadReport 的 JavaScript 函数，显示Telerik Report Server附带的一个示例报表的修改版本。

代码示例如下：

HTML

<div id="dashboard">
loading...
</div>

<style>
#dashboard {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>

JavaScript

<script>
const dashboardDiv = $("#dashboard");

const loadReport = () => {
dashboardDiv.telerik_ReportViewer({
reportServer: {
url: "//...",
username: "…",
password: "…"
},
reportSource: {
report: "Samples/Dashboard"
}
});
};
</script>

如上 loadReport 函数所示，加载报表本质上是一个声明式操作。要在选定的div元素中显示报告，需要将一个JavaScript对象文字传递给与div元素绑定的telerik_ReportView函数，该对象文字声明了Telerik Report Viewer需要的所有信息。

 有了loadReport函数，就可以在页面的jQuery ready事件中调用该函数来加载报表。加载报表后，捕获对报表的全局引用：

JavaScript

let rv;

$(() => {
loadReport();
rv = dashboardDiv.data("telerik_ReportViewer");
}

这里示范使用 “Dashboard” 示例报表，因为它提供了一个交互性场景：在Dashboard报表中，用户可以从报表右侧的列表中选择年份，并将该年份显示在左侧的报表主体中：

捕获报表事件

为了让应用程序的主机页面在用户与页面显示的报表交互时做出反应，需要将JavaScript函数连接到Report Viewer事件，Telerik Report Viewer提供了十多个事件。

本文使用使用updateUi事件，该事件在报表的UI发生变化时触发（选择新的年份确实会改变报表的UI）。要将函数绑定到事件，需要在定义报表的JavaScript对象文本中声明该事件，然后将函数绑定到该事件。

将函数绑定到updateUi事件如下所示：

reportSource: {
report: "Samples/Dashboard"
},
updateUi: e => {

}

updateUi事件可能不是应用程序的最佳选择。例如，如果您希望能够取消更改（可能在验证用户的输入之后），可能更喜欢使用interactiveActionExecuting事件，该事件支持取消用户更改，而updateUi事件不支持。

如果您开始在报表声明中连接多个事件（或者事件的函数变大），那么它可能会使对象文字难以阅读。如果是这样，可以在对象字面量之外定义函数，并将函数名称与报表对象字面量中的事件绑定，如下所示：

JavaScript

const handleYearChange = e => {

}
};

const loadReport = () => {
dashboardDiv.telerik_ReportViewer(
{
reportServer: {
url: "//...",
username: "…",
password: "…"
},
reportSource: {
report: "Samples/Dashboard"
},
updateUi: handleYearChange
}
);
};

如果您希望事件在某些时候可用，可以使用Report Viewer的bind和unbind方法根据事件的名称动态地绑定事件，并传递事件的名称（稍作修改）和您希望绑定到事件的函数。这段代码绑定并立即解绑定handleYearChange函数，例如：

JavaScript

rv.bind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);
rv.unbind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);

编写主机页面代码

既然已经将JavaScript函数绑定到报表的事件，就可以通过加载报表后创建全局引用访问报表了。或者在函数内部，您可以使用传递给函数的e参数来访问报表（它在e参数data.sender属性中）：

JavaScript

const handleYearChange = e => {
let rv = e.data.sender;
}

有了这个引用，现在可以扩展handleYearChange函数来更新主机页，并让主机页响应用户对报表的更改。对于这个案例研究，将在主机页面的一个文本框中显示用户在报表中选择的年份。

首先做简单的部分，并添加该文本框，设置其id属性为currentYear，然后创建一个JavaScript全局引用的文本框：

HTML

<input id="currentYear" />

JavaScript

const curInput = $("#currentYear");

除了事件之外，Report Viewer对象模型还有一组方法，这些方法返回可用于管理报表的对象。例如，Report Viewer ReportSource方法返回一个对象，该对象只有一个属性，命名为parameters。反过来，该parameters属性公开了一个对象，该对象对报表中定义的每个参数都具有命名属性（必须通过在报表设计器中打开报表来获取参数的名称）。

在示例报表中，保存当前选择的年份的参数称为ReportYear，可以使用该参数检索报表当前显示的年份。

需要注意的是：在绑定到updateUi事件的函数中要小心一些，因为该事件会在加载页面时反复引发—对于页面的各个部分（页眉、正文、页脚等），每次都会触发一次，代码多次执行可能会导致微妙的bug。

以下是updateUi事件中的代码，用于获取ReportYear参数的值并将其填充到文本框中（但只在参数更改时执行一次）：

JavaScript

let currentYear;

updateUi: (e) => {
parms = rv.reportSource().parameters;
if (currentYear !== parms.ReportYear) {
currentYear = parms.ReportYear;
curInput.val(parms.ReportYear);
}
}

现在，每当用户在报表中选择年份时，报表主机页面上的文本框将被更新。

与报表交互

正如一开始所说，交互性有两种方式。当用户与报表的宿主页交互时，您可能希望报表响应该更改。在本文的案例研究中，可能西药报表显示用户在主机页面上的文本框中输入一年的数据。

实现这一点需要从用户输入（CurrentYear文本框）中为报表（在本文的例子中是ReportYear）设置适当的参数，并刷新报表。为此扩展了文本框的声明，以便在用户更改文本框的内容并退出文本框时调用一个函数：

HTML

<input id="currentYear" onchange="updateReport()" />

在这个新的updateReport函数中，需要从文本框中检索当前值，更新报告上的适当参数（在本文的例子中是ReportYear），并调用报告的refreshReport方法—仍然使用对加载报告后创建的报告的全局引用。代码像这样：

JavaScript

let UpdateReport = () => {
let parms = rv.reportSource().parameters;
parms.ReportYear = curInput.val();
rv.refreshReport();
};

现在，当用户与主机页面交互时，报表将做出响应。

更多产品资讯及授权，欢迎来电咨询：023-68661681

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

慧都是Progress Telerik中国区的合作伙伴，Progress Telerik是一套为.NET开发者提供的丰富UI组件库，通过提供一套功能强大、预置丰富的.NET UI组件库（如数据网格、图表、日程管理等），帮助企业开发者显著简化了Web和桌面应用程序的开发流程，快速构建出用户体验现代化且功能完备的企业级应用。