集算表TableSheet，纯前端如何获取实时数据

1. 用集算表加载本地数据后，如何与填报场景联系起来，获取用户新增、删除、编辑后的对象数据呢？

2.如集算表无法实现，普通table加载本地数据源后，需要setDataSource至表单才能获取用户编辑后的数据吗？setDataSource后表头独占一行，数据index会有错位，且通过行右键插入不生效，请问该如何实现？

Ellia.Duan 发表于 2024-9-18 09:36
1、在集算表中如何获取更新后的数据？

可以通过getchanges获取集算表在autoSync 或批处理模式下新增，修 ...

感谢回复！

2、如何在集算表中获取全量数据?
在数据源管理器中可以通过read获取后端返回的全量数据

【re】: 请问是否有纯前端获取编辑后全量数据的方式呢？


3&4、普通table绑定数据后获取实时数据遇到的问题

【re】已知：
- table.bind(tableColumns, null, data);   表格绑定的bind方法是无法通过getDataSource获取的（参考 https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/data-binding/worksheet-binding/get-filling-data-with-databiding#%E9%97%AE%E9%A2%98%E5%A6%82%E4%BD%95%E5%9C%A8%E5%A1%AB%E6%8A%A5%E5%9C%BA%E6%99%AF%E4%B8%AD%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E5%A1%AB%E6%8A%A5%E5%90%8E%E7%9A%84%E6%95%B0%E6%8D%AE）

- sheet.setDataSource(data);  getDataSource可获取数据修改后的全量数据，但无法结合表格bindColumn使用(4、【re】：发现数据index错位和右键插入不生效是因为混用table.bindColumns和seDataSource导致的，单独使用setDataSource没有问题。)。使用setDataSource时可筛选表头是否需要用设计器自定义呢？是否有手动实现的案例呢？


综上：
如何实现一个可获取CRUD操作数据&可获取全量数据的纯前端可编辑可筛选表格组件，手动加载本地数据和抛出实时数据。
目前来看集算表的前端功能很符合需求，但全量数据获取如无原生前端API，只能想到通过比对原始数据和changes手动维护，请问有推荐方案吗？

感谢！

1、在集算表中如何获取更新后的数据？

可以通过getchanges获取集算表在autoSync 或批处理模式下新增，修改，删除的数据。

当然您也可以在数据管理器中的batch 或者insert ，update ，delete中获取发生变化的数据，具体参考这篇文章：
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/table-sheet/auto-sync-and-batch/overview/purejs



2、如何在集算表中获取全量数据？
在数据源管理器中可以通过read获取后端返回的全量数据

3、普通table加载本地数据源后，需要setDataSource至表单才能获取用户编辑后的数据吗？
setDataSource填充数据，getDataSource获取数据填报后的数据。

4、setDataSource后表头独占一行，数据index会有错位，且通过行右键插入不生效，请问该如何实现？
关于此问题，不是很明白，是否可以详细描述下数index的错位问题，以及右键插入什么不生效呢？

您好：
2、还可以通过以下方式获取：

1. let sheet = spread.getActiveSheetTab()
   
2. sheet.getDataView().fetch().then(data=>{
   
3.     console.log(data)
   
4. })

复制代码

3、getDataSource包含字段信息，如下图所示：

所以，不太明白 ，您提到的”但无法结合表格bindColumn使用“。

4、table.bindColumns和seDataSource可以混合使用。

1.   var tableColumns = [],
   
2.             names = ['orderDate', 'item', 'units', 'cost'],
   
3.             labels = ['日期', '商品', '单价', '售价'];
   
4.         var table2 = sheet.tables.add('table2', 10, 0, 1, 5);
   
5.         table2.autoGenerateColumns(false);
   
6. 
   
7. 
   
8.         names.forEach(function (name, index) {
   
9.             var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
   
10.             tableColumn.name(name);
    
11.             tableColumn.dataField(name);
    
12.             tableColumns.push(tableColumn);
    
13. 
    
14.         });
    
15.         table2.bindColumns(tableColumns);
    
16.         table2.bindingPath('sales');
    
17.         sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data3))

复制代码

此方式不存在index错位或者右键插入不生效的问题。

您可以上传一个复现您问题的demo上来，我们调研下。


最后，集算表可以获取修改数据getChanges以及获取全量数据（参考上文)。