找回密码
 立即注册

QQ登录

只需一步,快速开始

云智装
金牌服务用户   /  发表于:2021-10-27 11:50  /   查看:3166  /  回复:8
版本:在功能例子中测试的(https://demo.grapecity.com.cn/sp ... serialization/react
需求:根据数据生成多个表格,并绑定数据,对[size=1em]spread 进行JSON对象序列化存储(includeBindingSource:true,已经设置),然后反序列化对象,拿到反系列化后各个表格绑定的数据源,测试结果

问题
反序列化成对象获取不到脏数据,也获取不到绑定的数据源

测试代码
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
import './styles.css';

const Component = React.Component;

function _getElementById(id) {
    return document.getElementById(id);
}

class App extends Component {
    constructor(props) {
        super(props);
        this.spread = null;
        this.spread2 = null;
        this.import_noFormula = false;
        this.import_noStyle = false;
        this.import_rowHeaders = false;
        this.import_columnHeaders = false;
        this.import_donotrecalculateafterload = false;
        this.noFormula = false;
        this.noStyle = false;
        this.SaveCustomRowHeaders = false;
        this.SaveCustomColumnHeaders = false;
    }
    render() {
        return <div class="sample-tutorial">
            <div class="sample-spreadsheets-container">
                <label style={{ font: 'bold 10pt arial' }}>ToJson:</label>
                <div class="sample-spreadsheets">
                    <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
                        <Worksheet></Worksheet>
                    </SpreadSheets>
                </div>
                <br />
                <label style={{ font: 'bold 10pt arial' }}>FromJson:</label>
                <div class="sample-spreadsheets">
                    <SpreadSheets workbookInitialized={spread => this.initSpread2(spread)}>
                        <Worksheet></Worksheet>
                    </SpreadSheets>
                </div>
            </div>
            <div className="options-container">
                <div style={{ width: '290px' }}>
                    <label>This serializes the first Spread instance to a JSON object, and then deserializes that object into the second Spread instance.</label>
                    <div className="option-row">
                    <input type="button" defaultValue="getData" id="fromtoJsonBtn" onClick={e => this.getData(e)} />
                        <input type="button" defaultValue="Json Serialize" id="fromtoJsonBtn" onClick={e => this.serialization(e)} />
                    </div>
                </div>
            </div>
        </div>;
    }
    initSpread(spread) {
        this.spread = spread;
        let sheet = spread.getSheet(0);
        var spreadNS = GC.Spread.Sheets;
        sheet.suspendPaint();
        let data = {
            name: 'Jones', region: 'East',
            sales: [
                {orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isMakeMoney: true},
                {orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isMakeMoney: false},
                {orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isMakeMoney: false}
            ]
        };
        let convert = function (item) {
            return item['cost'] + '$';
        }
        let table = sheet.tables.add('tableSales', 0, 0, 5, 5);
        this.table = table;
        let tableColumn1 = new spreadNS.Tables.TableColumn(1, "orderDate", "Order Date", "d/M/yy");
        let tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "Item");
        let tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "Units");
        let tableColumn4 = new spreadNS.Tables.TableColumn(4, "cost", "Cost", null, null, convert);
        let tableColumn5 = new spreadNS.Tables.TableColumn(5, "isMakeMoney", "IsMakeMoney", null, new GC.Spread.Sheets.CellTypes.CheckBox());
        table.autoGenerateColumns(false);
        table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);

        sheet.resumePaint();
    }
    fillSampleData(sheet, range) {
        for (var i = 0; i < range.rowCount; i++) {
            for (var j = 0; j < range.colCount; j++) {
                sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300));
            }
        }
    }
    initSpread2(spread) {
        this.spread2 = spread;
    }
    changeImport_noFormula(e) {
        this.import_noFormula = e.target.checked;
    }
    changeImport_noStyle(e) {
        this.import_noStyle = e.target.checked;
    }
    changeImport_rowHeaders(e) {
        this.import_rowHeaders = e.target.checked;
    }
    changeImport_columnHeaders(e) {
        this.import_columnHeaders = e.target.checked;
    }
    changeImport_donotrecalculateafterload(e) {
        this.import_donotrecalculateafterload = e.target.checked;
    }
    changeNoFormula(e) {
        this.noFormula = e.target.checked;
    }
    changeNoStyle(e) {
        this.noStyle = e.target.checked;
    }
    changeSaveCustomRowHeaders(e) {
        this.SaveCustomRowHeaders = e.target.checked;
    }
    changeSaveCustomColumnHeaders(e) {
        this.SaveCustomColumnHeaders = e.target.checked;
    }
    getData(){
        var sheet = this.spread.getActiveSheet();
    var table= sheet.tables.findByName('tableSales')
       var sheet2 = this.spread2.getActiveSheet();
    var table2= sheet2.tables.findByName('tableSales')
    console.log('反系列化前获取脏数据',table.getDirtyRows())
    console.log('反系列化后获取脏数据',table2.getDirtyRows())
    }
    serialization(e) {
        var jsonOptions = {

        };
        var serializationOption = {
          includeBindingSource:true
        };
        //ToJson
        var spread1 = this.spread;
        var jsonStr = JSON.stringify(spread1.toJSON(serializationOption));

        //FromJson
        var spread2 = this.spread2;
        spread2.fromJSON(JSON.parse(jsonStr), jsonOptions);
    }
}

ReactDOM.render(<App />, _getElementById('app'));




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

8 个回复

倒序浏览
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-10-27 12:06:10
沙发
你好,在序列化之后脏数据是不会保存在json上,如果你需要记录脏数据,请在序列化前将脏数据保存。另外,当绑定的数据源序列化到json后,相当于给表单填值,而不是数据绑定。同样,也是需要在序列化前用getDataSource拿到数据源。 includeBindingSource更主要的场景是在使用数据绑定后能够在导出的Excel中能够看到绑定的数据。
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-10-27 14:07:50
板凳
Derrick.Jiao 发表于 2021-10-27 12:06
你好,在序列化之后脏数据是不会保存在json上,如果你需要记录脏数据,请在序列化前将脏数据保存。另外,当 ...

你好,我是通过表格方式绑定数据的,也就是说一个表格对应一个绑定的数据源,每个表格绑定的数据源都不一样,column也不一样。getDataSource不满足需求,也拿不到数据,目前我是通过Tables.able对象的方法bind()和getDirtyRows拿数据的。如果系列化不支持保存这些数据,我第二次编辑就无法拿到表格对应的数据了
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-10-27 14:10:23
地板
Derrick.Jiao 发表于 2021-10-27 12:06
你好,在序列化之后脏数据是不会保存在json上,如果你需要记录脏数据,请在序列化前将脏数据保存。另外,当 ...

这边有没有什么方案,在反系列化上拿到绑定数据的问题
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-10-27 14:54:31
5#
云智装 发表于 2021-10-27 14:07
你好,我是通过表格方式绑定数据的,也就是说一个表格对应一个绑定的数据源,每个表格绑定的数据源都不一 ...

如果用bind方法是拿不到数据源的,需要用setDataSource方法之后才能getDataSource方法拿到数据源,例如学习指南这个demo。
https://demo.grapecity.com.cn/sp ... able-binding/purejs

数据绑定的意义在于在线填报这一块,用户直接在spreadjs上面填报,然后后台通过getDataSource直接拿到数据源保存数据源信息。另外,数据绑定是双向绑定,也就是在线填报的时候修改了数据源,这时候拿到的数据就是最新的。反序列化之后也是拿不到数据源的。因此建议你将数据源和模板分开存储。
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-10-27 15:19:03
6#
Derrick.Jiao 发表于 2021-10-27 14:54
如果用bind方法是拿不到数据源的,需要用setDataSource方法之后才能getDataSource方法拿到数据源,例如学 ...

好的,只能用另外的实现方式了。请问下,反系列化之后也支持拿到绑定数据,这个后续版本更新中会考虑吗
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-10-27 15:52:46
7#
云智装 发表于 2021-10-27 15:19
好的,只能用另外的实现方式了。请问下,反系列化之后也支持拿到绑定数据,这个后续版本更新中会考虑吗

目前暂无此计划哈,这边也会将你的需求记录下来,后续也会考虑评估该需求的合理性以及实现的必要性。
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-10-27 17:33:25
8#
Derrick.Jiao 发表于 2021-10-27 15:52
目前暂无此计划哈,这边也会将你的需求记录下来,后续也会考虑评估该需求的合理性以及实现的必要性。

好的,如果后期有这个需求的改动方案。方便呢话通知下
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-10-27 17:45:29
9#
云智装 发表于 2021-10-27 17:33
好的,如果后期有这个需求的改动方案。方便呢话通知下

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部