子报表主子关联

主子报表–子报表主子关联

概述

子报表主子关联：主报表和子报表有字段相关联

应用场景

如下图所示，简单展示数据

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和Http接口数据集，Json数据如下图所示：

"Customer":
[
{"CustomerID":"ALFKI","CompanyName":"三川实业有限公司","ContactName":"刘小姐","ContactTitle":"销售代表","Address":"大崇明路 50 号","City":"天津","Region":"华北","PostalCode":"343567","Country":"中国","Phone":"(030) 30074321","Fax":"(030) 30765452"},
{"CustomerID":"ANATR","CompanyName":"东南实业","ContactName":"王先生","ContactTitle":"物主","Address":"承德西路 80 号","City":"天津","Region":"华北","PostalCode":"234575","Country":"中国","Phone":"(030) 35554729","Fax":"(030) 35553744"},
{"CustomerID":"BLAUS","CompanyName":"森通","ContactName":"王先生","ContactTitle":"销售代表","Address":"常保阁东 80 号","City":"天津","Region":"华北","PostalCode":"787045","Country":"中国","Phone":"(030) 30058460","Fax":"(030)  33008924"},
{"CustomerID":"CHOPS","CompanyName":"浩天旅行社","ContactName":"方先生","ContactTitle":"物主","Address":"白广路 314 号","City":"天津","Region":"华北","PostalCode":"234254","Country":"中国","Phone":"(030) 30076545","Fax":""},
{"CustomerID":"COMMI","CompanyName":"同恒","ContactName":"刘先生","ContactTitle":"销售员","Address":"七一路 37 号","City":"天津","Region":"华北","PostalCode":"453466","Country":"中国","Phone":"(030) 35557647","Fax":""},
{"CustomerID":"EASTC","CompanyName":"中通","ContactName":"林小姐","ContactTitle":"销售代理","Address":"光复北路 895 号","City":"天津","Region":"华北","PostalCode":"809784","Country":"中国","Phone":"(030) 35550297","Fax":"(030) 35553373"}
]

"Supplier":
[
{"SupplierID":11,"CompanyName":"小当","ContactName":"徐先生","ContactTitle":"销售经理","Address":"新华路 78 号","City":"天津","Region":"华北","PostalCode":"307853","Country":"中国","Phone":"(020) 99845103"}
]

报表设计

将数据字段拖入相对应的位置，并设置为分组(不合并单元格)以及向下扩展。

效果预览

子报表主子关联.json

https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1700640150979-45474b94-eca9-4386-be95-b5bc40605011.json

参考文档

• 小智报表样例源码下载
  • https://gitee.com/tizdata_admin/vue-xzreport-example.git
• 小智报表demo体验
  • https://xzdemo.tizdata.com/#/imbedShow/reportExample
  • 丰富的报表模板示例
• 小智报表在线试用
  • https://xzreport.com
• 小智报表js sdk下载
  • https://tizdata.com/xzdownload/
• 开发使用文档
  • https://doc.tizdata.com/xiaozhi/650