ActiveReportsJS v2.0—将报表加载到ActiveReportsJS设计器

收藏

本帖最后由 KearneyKang 于 2020-12-2 14:55 编辑

将报表加载到ActiveReportsJS设计器
[setReport](@api/classes/reportdesigner.designer.html#setreport) 方法允许将特定的报表加载到ActiveReportsJS设计器组件的实例。此方法接受应用程序内可访问的URL：`setReport({<id: URL>})` 或报表定义对象： `setReport({definition: <ReportDefinition>})`：`setReport（{definition：<ReportDefinition>}）`可选地，传递给`setReport`方法的对象可以包含`displayName`属性，该属性指示报告的个性化名称。 ``id``属性的值最初与`setReport（{<id：URL>}）`表单的URL匹配，并且可以与`setReport（{definition：<ReportDefinition>}）`的参数一起传递，传递形式也是如此。
该页面提供了几种常见方案实例。
设置最初显示的报表
默认情况下，ActiveReportsJS报表设计器组件的实例显示空白的RDL报表。要更改此行为，请在设计器实例初始化后立即调用`setReport`方法。检查 [Integration](Integration) 页面，以获取有关在各种应用程序类型中初始化设计器组件的更多信息。这是在React应用程序中设置初始显示的报告的示例。访问 [Live Demo](/activereportsjs/demos/features/designer-report-loading/) 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。
javascript

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
const initDesigner = (designerHostSelector) => {
const designer = new ReportDesigner(designerHostSelector);
// set the initially displayed report to "company-template"
designer.setReport({ id: "/reports/company-template.rdlx-json" });
};
export const DesignerHost = () => {
React.useEffect(() => initDesigner("#designer-host"), []);
return <div id="designer-host"></div>;
};
```
### 启用 "新建报表" 按钮
ActiveReportsJS报表设计器组件在工具栏上包含`新建报表`按钮。但是，默认情况下它未启用并且不可见。该代码应为设计器组件实例设置"onCreate"动作处理程序以启用此按钮。检查 [Action Handlers](Action-Handlers) 检查[Action Handlers]（Action-Handlers）页面以获取更多信息。 `onCreate` 处理程序应返回解析为报告链接或报告定义的Promise，这些对象的结构与上述setReport参数相同。这是React应用程序的`onCreate`处理程序的示例。访问[Live Demo](/activereportsjs/demos/features/designer-report-loading/) 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。
```javascript
import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
const initDesigner = (designerHostSelector) => {
const designer = new ReportDesigner(designerHostSelector);
designer.setActionHandlers({
onCreate: function () {
return Promise.resolve({ id: "/reports/company-template.rdlx-json" });
},
});
};
export const DesignerHost = () => {
React.useEffect(() => initDesigner("#designer-host"), []);
return <div id="designer-host"></div>;
};

复制代码

启用 "打开报表" 按钮
ActiveReportsJS报表设计器组件在工具栏上包含`打开`按钮。但是，默认情况下它未启用并且不可见。该代码应为设计器组件实例设置`onOpen`动作处理程序以启用此按钮。检查[Action Handlers](Action-Handlers)页面以获取更多信息。 `onOpen`处理程序应返回解析为报告链接或报告定义的`Promise`，这些对象的结构与上述setReport参数相同。访问 [Live Demo](/activereportsjs/demos/features/designer-report-loading/) 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。
加载报表以响应UI事件
应用程序可以在任何时间使用`setReport` 方法加载报表。这是React应用程序的示例，该应用程序在位于设计器组件外部的按钮的click事件处理程序中调用`setReport`方法。访问 [Live Demo](/activereportsjs/demos/features/designer-report-loading/) 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。
javascript

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
export const DesignerHost: React.FC = () => {
const designerRef = React.useRef<ReportDesigner | undefined>();
React.useEffect(() => {
designerRef.current = new ReportDesigner("#designer-host");
}, []);
const resetDesigner = (reportId: string) => {
designerRef.current?.setReport({ id: reportId });
};
return (
<Fragment>
<button onClick={() => resetDesigner("/reports/company-template.rdlx-json")}>
Set New Report
</button>
<div id="designer-host"></div>
</Fragment>
);
};

复制代码

		自动登录	找回密码
密码			立即注册

ActiveReportsJS v2.0—将报表加载到ActiveReportsJS设计器

1 个回复

圣诞拼拼乐

微信认证勋章

讲师达人

悬赏达人

元老葡萄