SpreadJS动态刷新数据

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

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

复制代码

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

1. //定义列信息
   
2. let colInfos = [
   
3.     { name: 'name', displayName: '姓名', size: 70 },
   
4.     { name: 'position', displayName: '职位', size: 50, visible: true },
   
5.     { name: 'birthday', displayName: '生日', formatter: 'YYYY-MM-DD', size: 120 },
   
6.     { name: 'age', displayName: '年龄', size: 40, resizable: true },
   
7. ];
   
8. //定义初始数据
   
9. var datasource = [
   
10.        { name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
    
11.        { name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
    
12.        { name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
    
13.        { name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
    
14.        { name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
    
15.        { name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
    
16.        { name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
    
17.        { name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
    
18.        { name: 'Alice', age: 27, birthday: '1994/08/31', position: 'PM' },
    
19.        { name: 'memo', age: 28, birthday: '1993/05/08', position: 'teacher' },
    
20.     ];
    
21. //设置绑定关系及数据
    
22. sheet.autoGenerateColumns = false;
    
23. sheet.setDataSource(datasource);
    
24. sheet.bindColumns(colInfos);

复制代码

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

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

复制代码

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