如何使用前端表格控件实现多数据源整合？
前言
作为表格产品的典型应用场景之一，几乎所有的行业都会存在类 Excel 报表开发这样的应用场景，而在这些应用场景中，经常会遇见下面的这些痛点：
- 报表数据往往来自多个不同的数据源，需要报表系统能够同时连接多个数据源，并融合不同的数据格式
- 实际的报表中需要对数据结果进行逻辑计算，例如销售的环比和同比、渠道的排名、分类的占比等等
今天小编就将为大家介绍一下如何使用葡萄城纯前端表格控件 SpreadJS 的报表插件实现多源数据的整合，并实现相应的逻辑计算。
环境准备
SpreadJS 新版本新增了一款报表插件，该插件基于 SpreadJS 本身强大的表格能力，在 DataManager 数据关系引擎的助力下，全新的报表插件让报表和数据录入用户有了全新的能力和体验，快速完成报表和数据录入功能的搭建，相对之前，能节省大量的开发成本，此外，报表 还支持数据输入、分页、数据筛选、排序、条件格式化等功能。
实现步骤
在介绍完报表插件之后，接下来小编将为大家详细介绍如何通过报表插件将多个数据源融合起来。
一、数据集准备
数据源的数据模型如下图所示：
二、dataManager设置数据源
前面小编给大家说过，报表插件借助 dataManager 可以实现连接数据源，完成报表的数据能力。
接下来小编就给大家介绍一下如何在 dataManager设置数据源，目前 dataManager 有三种方式设置数据源：分是HTTP请求、本地数据data和本地json文件。
1、HTTP请求
现有一个http请求,在浏览器中打开，结果如下：
接下来小编需要通过DataManager添加这个http请求：
1、打开 SpreadJS 在线表格编辑器，如下图所示，依次点击”数据“---->”数据源“---->”添加表“，在读取input框中，粘贴复制的链接。
2、修改 tableName ,将此修改为”GDP“。
3、点击”列“，发现获取了此接口的字段”description“，”length“，”data“ ，不是需要的数据。
4、返回”表“，可以设置数据路径，输入data。
5、再次点击”列“ ，已经有了需要的字段信息。
至此，dataManager 已经设置好了数据源。我们可以根据此数据源，添加集算表或者报表，如下所示：
上面这种是使用可视化（无需编码）的方式添加http 请求的添加数据源。
除此之外，SpreadJS还支持代码获取请求，介绍下如何通过代码的方式添加url数据源，通过借助addTable接口实现添加：
spread.dataManager().addTable('GDP', { remote: {read: {url: 'https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json'}}, schema: {dataPath: 'data'} }); <!doctype html> <html style="height:100%;font-size:14px;"> <head> <title></title> <meta charset="utf-8"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/css/gc.spread.sheets.excel2013white.17.0.2.css" rel="stylesheet" type="text/css"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/css/gc.spread.sheets.designer.17.0.2.min.css" rel="stylesheet" type="text/css"/> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/gc.spread.sheets.all.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.print.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.shapes.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.charts.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.barcode.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.pdf.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.pivot.pivottables.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.slicers.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.tablesheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.ganttsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.formulapanel.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.io.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.report.reportsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.all.17.0.2.min.js"></script> <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <div id="gc-designer-container" style="width:100%; height: 1000px"></div> </body> </html> <script type="text/javascript"> window.onload = function () { const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container")); const spread = designer.getWorkbook() spread.dataManager().addTable('GDP', { remote: {read: {url: 'https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json'}}, schema: {dataPath: 'data'} }); }; </script> 2、本地数据data
接下来介绍，如果通过本地数据，添加数据源。
如果要通过本地数据data的方式添加数据源，需要通过代码的方式，
简单的代码如下：
完整代码如下：
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <title></title> <meta charset="utf-8"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/css/gc.spread.sheets.excel2013white.17.0.2.css" rel="stylesheet" type="text/css"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/css/gc.spread.sheets.designer.17.0.2.min.css" rel="stylesheet" type="text/css"/> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/gc.spread.sheets.all.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.print.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.shapes.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.charts.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.barcode.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.pdf.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.pivot.pivottables.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.slicers.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.tablesheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.ganttsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.formulapanel.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.io.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.report.reportsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.all.17.0.2.min.js"></script> <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <div id="gc-designer-container" style="width:100%; height: 1000px"></div> </body> </html> <script type="text/javascript"> window.onload = function () { const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container")); const spread = designer.getWorkbook() let data = [ {id: 1,name: "张三", age: 27, sex: 0}, {id: 2,name: "李四", age: 31, sex: 1}, {id: 3,name: "小王", age: 22, sex: 1}, {id: 4,name: "小韩", age: 45, sex: 0}, {id: 5,name: "小明", age: 25, sex: 0}, ]; const ordersTable = spread.dataManager().addTable('person', {data}); }; </script> 上述代码，通过addTable创建table ，其中tableName是‘person’，数据是data。我们在页面上看一下。
观察上图，我们依次点击”数据“---->”数据源“ ，发现已经有了一个person表，而且读取的input是置灰不允许编辑的，此时点击下”列“，看下字段信息
发现此时已经成功加载了字段信息，同样的，我们在添加数据源table后，可以创建集算表或者报表，如下动图所示：
上面的例子是data的普通用法，我们看一下高级用法，导入json文件
3、本地json文件
如下图所示比，如何导入本地的Json文件呢？
首先，创建一个form表单，用来上传json文件：
<div class="inputContainer"> <input type="file" id="fileDemo" class="input"> <input type="button" id="loadData" value="导入json数据" class="button"> </div> 其次，设计按钮点击事件
document.getElementById('loadData').addEventListener('click', function () { var file = document.querySelector('#fileDemo').files[0]; if (!file) { return; } let reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onload = function (evt) { let result = JSON.parse(evt.target.result) }; reader.onerror = function (error) { console.log(error); }; }) 在上述代码中，我们解析了上传的json文件，得到result 。接下来，我们将result 放到dataManager中
reader.onload = function (evt) { let result = JSON.parse(evt.target.result) if (spread.dataManager().tables[fileName]) { spread.dataManager().removeTable(fileName); } const ordersTable = spread.dataManager().addTable(fileName, {data: result}); if (result.length > 0) { initReportSheet(ordersTable, result[0]) } 在上述代码中，我们添加了Orders表 ，其data数据为json文件中解析的数据，看一下实际结果
同样的，依次点击”数据“---->”数据源“ ，发现已经有了一个Orders表，而且读取的input是置灰不允许编辑的
此时点击下”列“，看下字段信息
完整过程如下图所示：
完整代码：
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <title></title> <meta charset="utf-8"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/css/gc.spread.sheets.excel2013white.17.0.2.css" rel="stylesheet" type="text/css"/> <link href="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/css/gc.spread.sheets.designer.17.0.2.min.css" rel="stylesheet" type="text/css"/> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/gc.spread.sheets.all.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.print.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.shapes.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.charts.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.barcode.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.pdf.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.pivot.pivottables.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.slicers.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.tablesheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.ganttsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.formulapanel.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.sheets.io.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/plugins/gc.spread.report.reportsheet.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script> <script src="https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/scripts/designer-lib/scripts/gc.spread.sheets.designer.all.17.0.2.min.js"></script> <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <div class="inputContainer"> <input type="file" id="fileDemo" class="input"> <input type="button" id="loadData" value="导入json数据" class="button"> </div> <div id="gc-designer-container" style="width:100%; height: 1000px"></div> </body> </html> <script type="text/javascript"> window.onload = function () { const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container")); const spread = designer.getWorkbook() document.getElementById('loadData').addEventListener('click', function () { var file = document.querySelector('#fileDemo').files[0]; if (!file) { return; } let fileName = file.name.split('.')[0] let reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onload = function (evt) { let result = JSON.parse(evt.target.result) if (spread.dataManager().tables[fileName]) { spread.dataManager().removeTable(fileName); } spread.dataManager().addTable(fileName, {data: result}); alert('设置完成') }; reader.onerror = function (error) { console.log(error); }; }) }; </script> 此外，还可以选择多个json文件，如下动图所示：
三、导入数据源
依次点击“数据”，“数据源”，发现已经导入了数据源，如下图所示：
四、设置模板
依次点击“插入”，“报表”，可以看得到左侧有数据源列表：
1、设置订单编号
首先将“订单”表的“订单编号”拖拽至A2单元格，
然后依次点击“报表设计”，“预览”查看结果。结果如下：
我们观察上图，只有订单编号信息，我们接着设置模板
2、设置门店
先将”门店“表的“商店名称”拖拽至B2单元格 ，
此时点击“预览”，发现“订单编号”与“商店名称”不存在对应关系，
接下来，我们选中A2单元格，选择“面板”进行过滤，然后在右侧的单元格属性中设置“过滤”条件，为
具体过程如下动图所示：
这样，便实现了订单与门店的对应关系：
接下来，添加订单明细数据
3、设置订单详情
将”订单明细“表中的”商品编号“，”订单单价“，”购买数量“ 依次拖拽进C2、D2、E2单元格。并且选中A2单元格，选择“面板”进行过滤，然后在右侧的单元格属性中设置“过滤”条件，如下图所示：
结果如下：
然后为报表添加下边框和样式，如下动图所示：
显示效果如下：
接下来，我们获取”商品信息“表，将”商品名称“添加至我们的报表中
4、设置商品名称
我们选中D列，然后右键，点击”插入“，此时有新增的一列。
我们将”商品信息“表的”商品名称“添加至D2单元格，选中C2单元格，即”商品编号“单元格，此时设置过滤条件
接下来，点击”预览“看下结果：
我们看到”商品编号“已经和”商品名称“一一对应，我们接下来调整下商品名称的列宽，并添加列头。
结果如下：
接下来，我们添加商品分类
5、设置商品类别
我们选中E列 ，然后右键，点击”插入“，此时有新增的一列。
我们将”商品分类“表的”小类名称“添加至E2单元格，选中D2单元格，即”商品名称“单元格，此时设置过滤条件
显示结果如下所示：
我们看到，商品名称和类别是一一对应的 ，我们的设置是正确的，同样，调整下样式。
接下来，我们看到当前模板有”单价“，”购买数量“，没有金额，我们添加下计算列
6、添加金额
我们为H2单元格设置公式 “=F2*G2” ，并设置样式
结果如下：
我们观察到上面的数据存在多位小数的情况，所以设置下单元格格式，右键，选择“设置单元格格式”
为“金额”单元格设置货币格式，结果如下：
看到这张报表，总觉得缺点什么，对了，缺订单小计。
接下来，我们设计下订单小计
7、设置订单小计
我们合并A2,A3单元格，合并B2,B3单元格,合并C3:G3单元格，在H3单元格中设置公式“=SUM(H2)”
操作过程如下动图所示：
显示效果如下：
至此，多数据源的报表就制作完成了。
总结
以上就是使用使用前端表格控件实现多数据源整合的全过程，如果您想了解更多详细信息，欢迎点击这里查看。
扩展链接：
关注公众号 低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。
- 上一篇
Percona Toolkit 神器全攻略（实用类）
Percona Toolkit 神器全攻略（实用类） Percona Toolkit 神器全攻略系列共八篇，前文回顾： 前文回顾 Percona Toolkit 神器全攻略 全文约定：$为命令提示符、greatsql>为GreatSQL数据库提示符。在后续阅读中，依据此约定进行理解与操作 实用类 在Percona Toolkit中实用类共有以下工具 pt-align：将其它工具输出内容与列对齐 pt-archiver：将表中的行存档到另一个表或文件中 pt-find：查找表并执行命令 pt-fingerprint：将查询转成密文 pt-kill：Kill掉符合条件的SQL pt-k8s-debug-collector：从 k8s/OpenShift 集群收集调试数据（日志、资源状态等） pt-secure-collect：收集、清理、打包和加密数据 pt-align 概要 通过读取行并将其分成单词的方式来执行列对齐。该工具首先计算每行包含的单词数量，并尝试确定是否有一个占主导地位的数字，将其假设为每行的单词数量。接下来，pt-align会排除所有不符合该数量的行，并将下一行视为第...
- 下一篇
一种人机协作新范式？为每个人准备的 AI Agents “羊皮卷”
编者按： 当前大热的大语言模型和检索增强生成模型，虽然在语言理解和内容生成方面取得了突破性的进展，但仍然存在诸多限制。它们缺乏根据目标导引行为、持续学习和与环境交互的能力，难以应对复杂多变的现实场景需求。 今天为大家带来的这篇文章，作者的观点是人工智能领域正朝着开发更智能、更自主的 AI Agent 系统迈进，这将彻底改变我们使用人工智能的方式。 作者相信人工智能的未来必将呈现出更智能、更自主的 AI Agent 形态。这种新型人工智能系统不再是简单的语言模型，而是集成了推理引擎、知识库、工具集成等多种能力于一体，能够深入理解环境、制定目标并自主采取行动，从而在诸多领域大显身手。我们有理由相信，AI Agent 将成为人工智能发展的新引擎，并最终改变人类的工作和生活方式。 本文对 AI Agent 这一概念进行了较为全面的解读，让我们一同认识 AI Agent ，认清发展趋势，做好迎接未来的准备。 作者 | Aniket Hingane 编译|岳扬 生成式AI只是人工智能发展的开端，未来可能会出现更先进的AI智能体系统（AI Agent），我们应当重视Andrew Ng（译者注：And...
相关文章
文章评论
共有0条评论来说两句吧...
微信收款码
支付宝收款码