登录/注册

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

141 主题	261 帖子	1682 积分

Rank: 8 Rank: 8

积分: 1682

5741
金币
141
主题
261
帖子

最新发帖

SpreadJS动态刷新数据

Winny
超级版主 / 发表于：2021-12-27 18:15 / 查看：2394 / 回复：0

在实际项目需求中，用户部分列数据可能不是静态不变的，需要经常性的从服务端拿数据并更新当前列的数据，本文会详细讲解如何实现列数据更新。
本文已表单级别的数据绑定为例，来展开介绍。
Step1: 初始化spread;

let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
let sheet = spread.getActiveSheet()

复制代码

Step2: 设置表单绑定，加载初始数据；

//定义列信息
let colInfos = [
{ name: 'name', displayName: '姓名', size: 70 },
{ name: 'position', displayName: '职位', size: 50, visible: true },
{ name: 'birthday', displayName: '生日', formatter: 'YYYY-MM-DD', size: 120 },
{ name: 'age', displayName: '年龄', size: 40, resizable: true },
];
//定义初始数据
var datasource = [
{ name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
{ name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
{ name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
{ name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
{ name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
{ name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
{ name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
{ name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
{ name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
{ name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
];
//设置绑定关系及数据
sheet.autoGenerateColumns = false;
sheet.setDataSource(datasource);
sheet.bindColumns(colInfos);

复制代码

Step3: 定时更新某列；本文定时去更新年龄所在列，在实际项目中，setInterval中，应该去向服务端发请求获取数据。但由于本文只是简单的demo，不涉及服务端，因此采用随机函数来代替。

//设置绑定关系及数据
sheet.autoGenerateColumns = false;
sheet.setDataSource(datasource);
sheet.bindColumns(colInfos);
function getRandom(){
//该函数用来模拟数据，实际项目中，这里应该是发送请求给服务端，返回更新后的数据
let randoms = []
for(let i=0;i<6;i++){
let item = Math.floor(Math.random()*(30-20+1)+20)
randoms.push([item])
}
return randoms
}
setInterval(function(){
//定时去更新年龄所在列
sheet.setArray(0,3,getRandom())
},3000)

复制代码

通过以上的步骤，就可以实现一个简单的列更新需求了，本文实例demo参考地址：
https://jscodemine.grapecity.com/share/FNa0CYpQ-UKA5UEn9V74bw/
示例demo所在平台部署在国外，因此访问可能会比较慢，请耐心等待一会哦~

收藏

回复

0 个回复