登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

76 主题	4895 帖子	7635 积分

Rank: 8 Rank: 8

积分: 7635

25497
金币
76
主题
4895
帖子

最新发帖

DataManager之设置数据源

SpreadJS 开发认证

超级版主 / 发表于：2024-4-19 11:51 / 查看：1325 / 回复：0

本帖最后由 Ellia.Duan 于 2024-4-19 13:55 编辑

继上文讲到ReportSheet实现员工在线考勤表，通过接口url设置数据源，除此之外，还有什么方式可以添加数据源呢？
本文将介绍三种设置数据源方式：HTTP请求、本地数据data、本地json文件。

一、http请求
此种方式在上文也讲到了，也是大多数获取数据的方式。
比如现在有一个http请求,在浏览器中打开，结果如下：
image.png147949828.png

image.png147949828.png

现在我们通过DataManager添加请求数据
1、我们可以复制此链接，然后打开Designer，如下图所示，依次点击”数据“---->”数据源“---->”添加表“，在读取input框中，粘贴复制的链接。 image.png935677795.png

image.png935677795.png

2、修改tableName ,我们将此修改为”GDP“
3、点击”列“，发现获取了此接口的字段”description“，”length“，”data“ ，不是我们要的数据。
image.png504758300.png

image.png504758300.png

4、返回”表“，可以设置数据路径，输入data
image.png229100341.png

image.png229100341.png

5、再次点击”列“ ，已经有了我们想要的字段信息
image.png438291015.png

image.png438291015.png

至此，dataManager已经设置好了数据源。我们可以根据此数据源，添加集算表或者报表，如下动图所示

至此，通过http请求就实现了添加数据源。这也是使用最多的一种方式。
接下来，我们介绍下如何通过代码的方式添加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。
remote读了read外还有create,update 。这个将在下篇文章重点介绍。

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

2024-4-19 13:49 上传

点击文件名下载附件
我们接下来介绍，如果通过本地数据，添加数据源。

二、本地数据data
如果要通过本地数据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。我们在页面上看一下。
image.png248013304.png

image.png248013304.png

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

image.png368258666.png

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

完整代码是：

数据获取-data.html (3.45 KB, 下载次数: 185)

2024-4-19 11:47 上传

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

三、本地json文件
本地有一个json数据源文件，如这里的orders.json

orders.json (367.19 KB, 下载次数: 392)

2024-4-19 11:19 上传

点击文件名下载附件

image.png154264220.png

我们想导入这样子的文件，作为数据源该如何处理呢？
首先，我们先创建一个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是置灰不允许编辑的
image.png430949401.png

image.png430949401.png

此时点击下”列“，看下字段信息
image.png349224852.png

image.png349224852.png

我们来完整看一下此过程

完整的代码文件是：

数据获取-json.html (6.06 KB, 下载次数: 192)

收藏

回复

0 个回复