Winny 发表于 2021-12-27 18:15:52

SpreadJS动态刷新数据

在实际项目需求中,用户部分列数据可能不是静态不变的,需要经常性的从服务端拿数据并更新当前列的数据,本文会详细讲解如何实现列数据更新。
本文已表单级别的数据绑定为例,来展开介绍。
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()
    }
    return randoms
}
setInterval(function(){
    //定时去更新年龄所在列
    sheet.setArray(0,3,getRandom())
},3000)
通过以上的步骤,就可以实现一个简单的列更新需求了,本文实例demo参考地址:
https://jscodemine.grapecity.com/share/FNa0CYpQ-UKA5UEn9V74bw/
示例demo所在平台部署在国外,因此访问可能会比较慢,请耐心等待一会哦~








页: [1]
查看完整版本: SpreadJS动态刷新数据