V2
V2V1

使用预置数据源和数据集

ActiveReportsJS报表设计器允许绑定到各种数据源并提供非常灵活的配置。 检查[数据绑定](../../ ReportAuthorGuide / Databinding)页面以获取有关此主题的更多信息。 但是,可能需要为新创建的报告预先设置数据绑定,以简化非技术用户的报告设计体验。 ActiveReportsJS设计器API允许定义默认情况下可供最终用户使用的数据源和数据集。 用户界面如下所示:

ARJS设计器 预定义数据源

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

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

建立数据源

  1. 设置数据源名称.
  2. 设定终点.
  3. 点击 "Export" 按钮.
  4. 在"导出模板"对话框中选择内容并复制.

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

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

然后,使用独立设计器应用程序构建和导出所需的数据集。 这是一个快速指南,指导如何开发和导出Northwind数据源的 /CategoriesAPI的数据集。

-为上一步添加的数据源添加数据集

建立数据集

  1. 设置数据集名称.
  2. 设置API路径.
  3. JSon路径设置为 $.[*], 访问 JSON Path文档有关此主题的更多信息。
  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 属性指示在用户将相应实体添加到报表后是否应立即打开数据源/数据集对话框。

请访问 功能演示 以获得Angular,React,Vue和纯JavaScript应用程序的完整示例。

相关链接