如何实现表格的部分展示

收藏

本帖最后由 songcheng202 于 2019-6-11 17:15 编辑

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

Fiooona · Fiooona

你好，SpreadJS本身支持海量数据的加载，并且内置了缓存机制，您的数据量有多少呢？在什么环境下会出现页面崩溃？可以提供一个Demo我们帮您看一下具体导致页面崩溃的原因。

songcheng202 · songcheng202

Fiooona 发表于 2019-6-11 18:08
你好，SpreadJS本身支持海量数据的加载，并且内置了缓存机制，您的数据量有多少呢？在什么环境下会出现页面 ...

一个sheet中可能有多个table，每个table有个1万行100列数据
接口返回数据的时候浏览器就崩溃了吧~

Fiooona · Fiooona

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

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

songcheng202 · songcheng202

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

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

Fiooona · Fiooona

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

sheetbind.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
// console.log(args);
//追加数据源
if(args.newTopRow > 4){
console.log(args);
var data = { name: 'Jones', region: '西北地区',
sales: [
{ 时间: '2019/4/1', 项目: '项目1', 数量: 3, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目2', 数量: 35, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
]};
table.bindColumns(tableColumns);
table.bindingPath('sales');
source =new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheetbind.setDataSource(source);
sheetbind.repaint();
}
});

复制代码

songcheng202 · songcheng202

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

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

Fiooona · Fiooona

SpreadJS是用Canvas实现的，不是用DOM，本身就是只渲染可视的界面，百万行数据轻松加载，您说的效果无法实现，也没有必要实现，

如果您实际使用中出现什么问题了，可以具体问题具体分析（复杂公式、样式），我们有性能测试过200多万行数据40毫秒可以加载

songcheng202 · songcheng202

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

给个大数量的例子看下可以嘛

如果接口返回了10W条数据浏览器本身就崩了啊你都拿不到数据吧

Fiooona · Fiooona

示例代码来了

		自动登录	找回密码
密码			立即注册

[已处理] 如何实现表格的部分展示

12 个回复

微信认证勋章