如何实现表格的部分展示

为了避免表格展示时因数据量过大导致页面崩溃的问题
现在想通过topRowChanged事件在页面滚动时，重新请求json，通过workbook.fromJSON(json) 实现表格在可视化区域的部分展示
json该如何修改呢? 操作dataTable？

首先，这是浏览器。您说的设计器是不是在线表格编辑器？SpreadJS 在线表格编辑器，是类似在线Excel功能和外观的在线表格编辑程序，也是 SpreadJS 桌面设计器的在线版本，提供源代码，您可自由定制，任意扩展。该产品内嵌了 SpreadJS，使用离线和在线方式均可进行表格编辑。
这个例子的所有代码都在那个文件夹里，您可以仔细读一下，您可以在例子中直接操作，根据数据的数量来测量SpreadJS的处理速度。除数据加载时间外，您还可以检查排序，筛选和分组所需的时间。
数据量大的时候，导入导出较慢的话可以通过suspendPaint和resumePaint减少重绘次数来进行优化，参考：
https://demo.grapecity.com.cn/Sp ... #/demos/spreadPaint
JSON导入导出可以参考：https://demo.grapecity.com.cn/Sp ... preadFromJSONToJSON
最后还是建议您在开发过程中遇见什么实际的问题，可以发来Demo,我们的工程师会为您排查问题，给出优化的方案。

Fiooona 发表于 2019-6-13 11:23
示例代码来了

你这个是设计器中显示，不是我提的大数据量在浏览器与接口中交互吧

Fiooona 发表于 2019-6-13 11:23
示例代码来了

数据多了 怎么做toJSON等相关操作呢？

示例代码来了

Fiooona 发表于 2019-6-13 10:59
SpreadJS是用Canvas实现的，不是用DOM，本身就是只渲染可视的界面，百万行数据轻松加载，您说的效果无法实 ...

给个大数量的例子看下可以嘛
如果接口返回了10W条数据 浏览器本身就崩了啊  你都拿不到数据吧

SpreadJS是用Canvas实现的，不是用DOM，本身就是只渲染可视的界面，百万行数据轻松加载，您说的效果无法实现，也没有必要实现， 如果您实际使用中出现什么问题了，可以具体问题具体分析（复杂公式、样式），我们有性能测试过200多万行数据40毫秒可以加载

Fiooona 发表于 2019-6-12 15:44
你好，可以参考下附件中示例，核心代码如下：

很谢谢你的回复，能不能不是对dataSource进行追加，滑到最下面还是所有的数据都在浏览器上了  
能不能是在可视化的行范围内 只展示该范围的内容

你好，可以参考下附件中示例，核心代码如下：

1. 
   
2.   sheetbind.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
   
3.         // console.log(args);
   
4.                //追加数据源
   
5.                if(args.newTopRow > 4){
   
6.                 console.log(args);
   
7.                 var data = { name: 'Jones',  region: '西北地区',
   
8.                     sales: [
   
9.                         { 时间: '2019/4/1', 项目: '项目1', 数量: 3, 花费: 1.99 },
   
10.                         { 时间: '2019/4/1', 项目: '项目2', 数量: 35, 花费: 1.99 },
    
11.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
12.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
13.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
14.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
15.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
16.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
17.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
18.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
19.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
20.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
21.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
22.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
23.                         { 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
    
24.                     ]};
    
25.                     table.bindColumns(tableColumns);
    
26.                         table.bindingPath('sales');
    
27.                         source =new GC.Spread.Sheets.Bindings.CellBindingSource(data);
    
28.                         sheetbind.setDataSource(source);
    
29.                     sheetbind.repaint();
    
30.                }
    
31.            
    
32.                 });
    

复制代码

Fiooona 发表于 2019-6-12 09:21
这个具体会不会崩溃不一定，如果您实际中遇见这样的问题，可以把导致崩溃的数据发来，我们会针对您的Demo ...

现在就是想了解一下不把数据全部查出来 能不能在页面滑动的时候异步加载数据显示
当然该数据对应的行号和样式不能变

songcheng202 发表于 2019-6-11 18:28
一个sheet中可能有多个table，每个table有个1万行100列数据   
接口返回数据的时候浏览器就崩溃了吧~

这个具体会不会崩溃不一定，如果您实际中遇见这样的问题，可以把导致崩溃的数据发来，我们会针对您的Demo给出具体优化的方案，您这现在是想象出来的问题，现在还真不好给出解答。