报表插件（ReportSheet）设置数据源

继上文讲到报表插件（ReportSheet）实现员工在线考勤表，通过接口url设置数据源，除此之外，还有什么方式可以添加数据源呢？
本文将介绍三种设置数据源方式：远程数据源、本地数据源、本地json文件。其中远程数据源，SpreadJS支持 REST API、OData 和 GraphQL。本文以REST API为例，进行介绍。


一、远程数据源
远程数据源也是使用最广泛的一种方式。支持基础的CRUD操作，比如read,update,create,delete属性，分别用来描述读取，修改，新增，删除的接口定义。
由于本文的主题是设置数据源，所以仅介绍read属性，其他属性将在下文报表插件（ReportSheet) 实现数据填报功能来描述。
我们来看下read的定义：

从上图中，我们看到read支持两种方式，一种是IRemoteReadRequestOption，另一种是GC.Data.RemoteReadHandler。我们分开介绍
1、IRemoteReadRequestOption

如上图所示，IRemoteReadRequestOption包括adapter，body，method，url等属性。
比如现在有一个RESTful API，如果不设置body ,我们可以直接UI上进行操作。
1）首先复制此链接，然后打开Designer，如下图所示，依次点击”数据“---->”数据源“---->”添加表“，在读取input框中，粘贴复制的链接。
  
2）修改tableName ,我们将此修改为”GDP“
3）点击”列“，发现获取了此接口的字段”description“，”length“，”data“  ，不是我们要的数据。

4）返回”表“，可以设置数据路径，输入data

5）再次点击”列“ ，已经有了我们想要的字段信息


至此，dataManager已经新增了GDP表。我们可以根据此表，添加集算表或者报表，如下动图所示

通过上述UI方式，通过设置api接口实现了添加数据源。
接下来，我们介绍下如何通过代码的方式添加url数据源

1.    spread.dataManager().addTable('GDP', {
   
2.             remote: {read: {url: 'https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json'}},
   
3.             schema: {dataPath: 'data'}
   
4.         });
   

复制代码

上述代码主要是通过addTable创建数据源table 。
第一个参数是tableName ，第二个参数是IDataSourceOption ，包括autoSync、batch、data、remote、schema。
我们观察上面的代码，主要是设置了remote中read(读操作的选项)的url ，schema中dataPath。

除此之外，我们如何添加body呢？

1.    dataManager.addTable("student", {
   
2.             remote: {
   
3.                 read: {
   
4.                     url: 'http://localhost:3000/studentListByClassId',
   
5.                     body: {classId: 1},
   
6.                     method: 'post'
   
7.                 },
   
8.             }
   
9.         });
   

复制代码

上面的代码，我们在read属性中定义了url ,body，method等属性，完成一个查询classId为1的post请求。
当然，有时候，后端传回来的接口数据需要进一步调整，我们要如何处理呢？readc除了接收url等属性，还可以传值Promise
2、RemoteReadHandler
用来自定义处理数据，比如后端传给前端的接口数据，需要进一步调整，或者添加token
比如下面的代码

1. dataManager.addTable("student", {
   
2.                 batch: true,
   
3.                 remote: {
   
4.                     read: function () {
   
5.                         let data = [
   
6.                             {id: 1, name: "学生", age: 4, sex: '男', classId: 2},
   
7.                             {id: 2, name: "李四", age: 8, sex: '女', classId: 2},
   
8.                             {id: 3, name: "小王", age: 7, sex: '男', classId: 2},
   
9.                             {id: 4, name: "小韩", age: 8, sex: '女', classId: 2},
   
10.                             {id: 5, name: "小明", age: 7, sex: '男', classId: 2},
    
11.                         ]
    
12.                         return Promise.resolve(data);
    
13.                     }
    
14.                 },
    
15.             });

复制代码

在上面的代码中，我们定义了一个静态变量data , 然后通过Promise.resolve(data)进行返回。
或者下面的代码：

1. var dataManager = spread.dataManager();
   
2.         dataManager.addTable("student", {
   
3.             remote: {
   
4.                 read: function () {
   
5.                     return getStudentList(1)
   
6.                 }
   
7.             }
   
8.         });

复制代码

我们发现，上面的代码中，read返回了一个Promise函数。Promise函数定义如下：

1. function getStudentList(token) {
   
2.         return new Promise((resolve, reject) => {
   
3.             fetch("http://127.0.0.1:3000/studentByToken", {
   
4.                 method: "get",
   
5.                 headers: {
   
6.                     "Authorization": token,
   
7.                 },
   
8.             }).then((response) => response.json())
   
9.                 .then((data) => resolve(data));
   
10.         });
    
11.     }

复制代码

数据获取-url.html (3.28 KB, 下载次数: 228)

2024-4-19 13:49 上传

点击文件名下载附件
read_body.html (4.29 KB, 下载次数: 0)

前天 14:39 上传

点击文件名下载附件
我们接下来介绍，如何通过本地数据源，在数据源中添加一张表。

二、本地数据源
如果要通过本地数据的方式添加数据源，需要通过代码的方式。
简单的代码如下：

1.        let data  = [
   
2.             {id: 1,name: "张三", age: 27,  sex: 0},
   
3.             {id: 2,name: "李四", age: 31,  sex: 1},
   
4.             {id: 3,name: "小王", age: 22,  sex: 1},
   
5.             {id: 4,name: "小韩", age: 45,  sex: 0},
   
6.             {id: 5,name: "小明", age: 25,  sex: 0},
   
7.         ];
   
8.         const ordersTable = spread.dataManager().addTable('person', {data});

复制代码

上述代码，通过addTable创建table ，其中tableName是‘person’，数据是data。我们在页面上看一下。

观察上图，我们依次点击”数据“---->”数据源“ ，发现已经有了一个person表，而且读取的input是置灰不允许编辑的，此时点击下”列“，看下字段信息

发现此时已经成功加载了字段信息，同样的，我们在添加数据源table后，可以创建集算表或者报表，如下动图所示：



完整代码是： 数据获取-data.html (3.45 KB, 下载次数: 189)

2024-4-19 11:47 上传

点击文件名下载附件
上面的例子是data的普通用法，我们看一下高级用法，导入json文件


三、本地json文件
本地有一个json数据源文件，如这里的orders.json
orders.json (367.19 KB, 下载次数: 401)

2024-4-19 11:19 上传

点击文件名下载附件


我们想导入这样子的文件，作为数据源该如何处理呢？
首先，我们先创建一个form表单，用来上传json文件

1. <div class="inputContainer">
   
2.     <input type="file" id="fileDemo" class="input">
   
3.     <input type="button" id="loadData" value="导入json数据" class="button">
   
4. </div>

复制代码

其次，设计按钮点击事件

1. document.getElementById('loadData').addEventListener('click', function () {
   
2. var file = document.querySelector('#fileDemo').files[0];
   
3. if (!file) {
   
4. return;
   
5. }
   
6. let reader = new FileReader();
   
7. reader.readAsText(file, "UTF-8");
   
8. reader.onload = function (evt) {
   
9. let result = JSON.parse(evt.target.result)
   
10. };
    
11. reader.onerror = function (error) {
    
12. console.log(error);
    
13. };
    
14. })

复制代码

在上述代码中，我们解析了上传的json文件，得到result 。接下来，我们将result 放到dataManager中

1.        reader.onload = function (evt) {
   
2.                 let result = JSON.parse(evt.target.result)
   
3. 
   
4.                 if (spread.dataManager().tables[fileName]) {
   
5.                     spread.dataManager().removeTable(fileName);
   
6.                 }
   
7.                 const ordersTable = spread.dataManager().addTable(fileName, {data: result});
   
8.                 if (result.length > 0) {
   
9.                     initReportSheet(ordersTable, result[0])
   
10.                 }
    
11. 
    
12. 
    
13.             };

复制代码

在上述代码中，我们添加了Orders表 ，其data数据为json文件中解析的数据，看一下实际结果
同样的，依次点击”数据“---->”数据源“ ，发现已经有了一个Orders表，而且读取的input是置灰不允许编辑的

此时点击下”列“，看下字段信息

我们来完整看一下此过程

完整的代码文件是： 数据获取-json.html (6.06 KB, 下载次数: 196)

2024-4-19 11:48 上传

点击文件名下载附件
此外，还可以选择多个json文件，如下动图所示：