Web端在线设计器如何内置好数据

ActivereportsJs提供web端在线设计器，使用者可以根据通过web设计器进行数据源数据集的绑定，然后使用设计器的设计界面进行报表的设计。

在实际业务场景中，有这样一种场景：web报表设计器集成到项目中，并且面向的对象是业务人员，业务人员可能对数据库操作这块不是很熟悉，他们只需要关注自己的报表需求，在设计器进行拖拽设计报表。那么就需要在web端在线设计器中内置好数据源数据集，这样让业务人员能够只关注业务逻辑，设计出满足自己需求的报表。

ActivereportsJs 提供了一个可以内置数据源的接口，可以通过调用接口的方式进行设计器数据源数据集的绑定

下面我们啊，来讲解下如何实现

1、核心代码

  designer.setDataSourceTemplates([
        {
          id: "Northwind",
          title: "Northwind",
          template: resources.dataSource,
          canEdit: false,
          datasets: [
            {
              id: "Categories",
              title: "Categories",
              template: resources.categoriesDataSet,
              canEdit: false,
            },
            {
              id: "Products",
              title: "Products",
              template: resources.productsDataSet,
              canEdit: false,
            },
          ],
         },
        ]);

核心代码

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

2、预览展示结果

3、实现demo

Webonlinedata.rar

Page tree

Web端在线设计器如何内置好数据