乐趣区

关于前端:纯JS集成报表系列教程6Web端在线设计器如何内置好数据

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、预览展现后果

退出移动版