当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 18:02:16 HTML5

纯JS综合报表系列教程6-如何在web端在线设计器设计界面中搭建好数据进行报表设计。在实际业务场景中,有这样一种场景:web报表设计者融入到项目中,目标是业务人员。业务人员对数据库操作可能不是很熟悉。他们只需要关注自己的报告要求即可。拖放以在设计器中设计报告。那么就需要在web端的在线设计器中内置数据源数据集,让业务人员可以只专注于业务逻辑,设计满足自己需求的报表。ActiveReportsJs提供了内置数据源的接口,可以通过调用该接口绑定设计器数据源数据集。下面解释一下如何实现1.核心代码designer.setDataSourceTemplates([{id:"Northwind",title:"Northwind",template:resources.dataSource,canEdit:false,datasets:[{id:"Categories",title:“类别”,模板:resources.categoriesDataSet,canEdit:false,},{id:“产品”,标题:“产品”,模板:resources.productsDataSet,canEdit:false,},],},]);核心代码resources.dataSource={Name:"Northwind",ConnectionProperties:{DataProvider:"JSON",ConnectString:"endpoint=https://demodata.grapecity.com/northwind/api/v1",},};2.预览显示结果