请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

139

主题

256

帖子

1639

积分

超级版主

Rank: 8Rank: 8

积分
1639
Winny
超级版主   /  发表于:2021-12-27 18:15  /   查看:2270  /  回复:0
在实际项目需求中,用户部分列数据可能不是静态不变的,需要经常性的从服务端拿数据并更新当前列的数据,本文会详细讲解如何实现列数据更新。
本文已表单级别的数据绑定为例,来展开介绍。
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所在平台部署在国外,因此访问可能会比较慢,请耐心等待一会哦~








0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部