在线设计器集成教程-新建报表时内置数据源和数据集

登录

本帖最后由 KearneyKang 于 2021-6-7 19:10 编辑

应用场景：设计器大都集成到业务系统后，为业务人员提供编辑的功能，因此往往业务人员对业务逻辑非常擅长，但不理解任何的IT 技术背景信息，所以我们的开发人员往往希望再为业务人员打开在线报表编辑器的时候，能够内置好可用的业务数据，供业务人员来直接使用。
ActiveReportsJS 提供了这个方法，setDataSourceTemplates，可在业务人员点击添加数据源或数据集时候实现一键添加。
示例代码：

操作步骤：
调用setDataSourceTemplates 接口，需要将标准的数据源和数据集的声明模板JSON，这样报表和设计器才能识别出来，因此如何获取 ARJS 可识别的数据源和数据集的JSON 声明规范呢，有两种方式：
1. 创建数据源和数据集时均有导出按钮，使用导出即可生成对应的JSON 格式，复制后，并再代码中生命变量：

const dataSource = { Name: "Northwind", ConnectionProperties: { DataProvider: "JSON", ConnectString: "endpoint=https://demodata.grapecity.com/northwind/api/v1", },}

复制代码

2. 数据集也是同样的操作方式

const categoriesDataSet = { Name: "Categories", Query: { DataSourceName: "Northwind", CommandText: "uri=/Categories;jpath=$.[*]
", }, Fields: [ { Name: "categoryId", DataField: "categoryId" }, { Name: "categoryName", DataField: "categoryName" }, { Name: "description", DataField: "description" }, ],};

复制代码

3. 使用 SetDataSourceTemplates 方法设置数据源和数据集。

const designer = new ReportDesigner("#designer-host"); designer.setDataSourceTemplates([ { id: "Northwind", title: "Northwind", template: dataSource, canEdit: true, shouldEdit: true, datasets: [ { id: "Categories", title: "Categories", template: categoriesDataSet, canEdit: false } ], }, ]);

复制代码

注意：canEdit 数据源和数据集模板的属性指示是否允许最终用户修改它们，, shouldEdit 属性指示在用户将相应实体添加到报表后是否应立即打开数据源/数据集对话框。

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

在线设计器集成教程-新建报表时内置数据源和数据集

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄