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）页面以获取更多信息。 `onCreate` 处理程序应返回解析为报告链接或报告定义的Promise，这些对象的结构与上述setReport参数相同。 这是React应用程序的`onCreate`处理程序的示例。 访问(/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>
);
};
页:
[1]