关于前端:纯前端数据可视化编辑器初始化时预置数据源和数据集

51次阅读

共计 1440 个字符,预计需要花费 4 分钟才能阅读完成。

ActiveReportsJS 报表设计器容许绑定到各种数据源并提供非常灵活的配置。页面以获取无关此主题的更多信息。然而,可能须要为新创建的报告事后设置数据绑定,以简化非技术用户的报告设计体验。ActiveReportsJS 设计器 API 容许定义默认状况下可供最终用户应用的数据源和数据集。用户界面如下所示:

应用此性能,请首先应用独立设计器应用程序构建和导出所需的数据源。这是一个疾速操作步骤,显示如何为开发和导出数据源 “Northwind” REST API end point.

  • 运行独立的设计器应用程序
  • 在属性表格的数据标签中增加新的数据源

  1. 设置数据源名称.
  2. 设定起点.
  3. 点击 “Export” 按钮.
  4. 在 ” 导出模板 ” 对话框中抉择内容并复制.
    在应用程序的代码中,定义一个变量并将其值设置为复制的内容,例如:

`const dataSource = {Name: “Northwind”, ConnectionProperties: { DataProvider: “JSON”, ConnectString: “endpoint=https://demodata.grapecity.co…1”,}, };
`
而后,应用独立设计器应用程序构建和导出所需的数据集。这是一个疾速指南,领导如何开发和导出 Northwind 数据源的 /CategoriesAPI 的数据集。
- 为上一步增加的数据源增加数据集

  1. 设置数据集名称.
  2. 设置 API 门路.
  3. JSon 门路设置为 $.[*],
  4. 点击 ”Validate” 按钮获取字段列表.
  5. 点击 ”Export” 按钮.
  6. 选中 “Export template” 对话框中的内容并且复制它.
  7. 敞开 ”Export template” 对话框并且保留它.

在应用程序的代码中,定义一个变量并将其值设置为复制的内容,例如:

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

最初, 应用设计器实例的 setDataSourceTemplates 办法来设置可用的数据源最初,应用 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