报表插件（ReportSheet）设置数据源
本帖最后由 Ellia.Duan 于 2024-11-28 14:39 编辑继上文讲到报表插件（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数据源
spread.dataManager().addTable('GDP', {
remote: {read: {url: 'https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json'}},
schema: {dataPath: 'data'}
});
上述代码主要是通过addTable创建数据源table 。
第一个参数是tableName ，第二个参数是IDataSourceOption ，包括autoSync、batch、data、remote、schema。
我们观察上面的代码，主要是设置了remote中read(读操作的选项)的url ，schema中dataPath。
除此之外，我们如何添加body呢？
dataManager.addTable("student", {
remote: {
read: {
url: 'http://localhost:3000/studentListByClassId',
body: {classId: 1},
method: 'post'
},
}
});
上面的代码，我们在read属性中定义了url ,body，method等属性，完成一个查询classId为1的post请求。
当然，有时候，后端传回来的接口数据需要进一步调整，我们要如何处理呢？readc除了接收url等属性，还可以传值Promise
2、RemoteReadHandler
用来自定义处理数据，比如后端传给前端的接口数据，需要进一步调整，或者添加token
比如下面的代码
dataManager.addTable("student", {
batch: true,
remote: {
read: function () {
let data = [
{id: 1, name: "学生", age: 4, sex: '男', classId: 2},
{id: 2, name: "李四", age: 8, sex: '女', classId: 2},
{id: 3, name: "小王", age: 7, sex: '男', classId: 2},
{id: 4, name: "小韩", age: 8, sex: '女', classId: 2},
{id: 5, name: "小明", age: 7, sex: '男', classId: 2},
]
return Promise.resolve(data);
}
},
});在上面的代码中，我们定义了一个静态变量data , 然后通过Promise.resolve(data)进行返回。
或者下面的代码：
var dataManager = spread.dataManager();
dataManager.addTable("student", {
remote: {
read: function () {
return getStudentList(1)
}
}
});我们发现，上面的代码中，read返回了一个Promise函数。Promise函数定义如下：
function getStudentList(token) {
return new Promise((resolve, reject) => {
fetch("http://127.0.0.1:3000/studentByToken", {
method: "get",
headers: {
"Authorization": token,
},
}).then((response) => response.json())
.then((data) => resolve(data));
});
}
我们接下来介绍，如何通过本地数据源，在数据源中添加一张表。
二、本地数据源
如果要通过本地数据的方式添加数据源，需要通过代码的方式。
简单的代码如下：
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});上述代码，通过addTable创建table ，其中tableName是‘person’，数据是data。我们在页面上看一下。
观察上图，我们依次点击”数据“---->”数据源“ ，发现已经有了一个person表，而且读取的input是置灰不允许编辑的，此时点击下”列“，看下字段信息
发现此时已经成功加载了字段信息，同样的，我们在添加数据源table后，可以创建集算表或者报表，如下动图所示：
完整代码是：
上面的例子是data的普通用法，我们看一下高级用法，导入json文件
三、本地json文件
本地有一个json数据源文件，如这里的orders.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;
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) {
spread.dataManager().removeTable(fileName);
}
const ordersTable = spread.dataManager().addTable(fileName, {data: result});
if (result.length > 0) {
initReportSheet(ordersTable, result)
}
};
在上述代码中，我们添加了Orders表 ，其data数据为json文件中解析的数据，看一下实际结果
同样的，依次点击”数据“---->”数据源“ ，发现已经有了一个Orders表，而且读取的input是置灰不允许编辑的
此时点击下”列“，看下字段信息
我们来完整看一下此过程
完整的代码文件是：
此外，还可以选择多个json文件，如下动图所示：
页:
[1]