版本:在功能例子中测试的(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'));
|