数据源序列化

你可以通过调用 Spread.toJSON 方法并在传入的对象参数中设置 includeBindingSource 选项为 true 来将表单或者表格中的数据源序列化到最终的 JSON 对象中。

这使得在将Spread实例序列化为JSON时,很容易包含它绑定到的实际数据源。如果您想在另一个Spread实例中加载那个JSON,您就不必担心再次将Spread绑定到数据源,因为它已经包含在其中了。
<template> <div class="sample-tutorial"> <div class="sample-spreadsheets-container"> <label style="font:bold 10pt arial">Source:</label> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet :dataSource="dataSource" :autoGenerateColumns="autoGenerateColumns"> <gc-column :dataField="'Film'" :width="150"></gc-column> <gc-column :dataField="'Genre'" :width="150"></gc-column> <gc-column :dataField="'Lead Studio'" :width="80"></gc-column> <gc-column :dataField="'Audience Score %'" :width="150"></gc-column> <gc-column :dataField="'Profitability'" :width="80"></gc-column> <gc-column :dataField="'Rating'"></gc-column> <gc-column :dataField="'Worldwide Gross'"></gc-column> <gc-column :dataField="'Year'"></gc-column> </gc-worksheet> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <br /> <label style="font:bold 10pt arial">Target:</label> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread2"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div> <div class="options-container"> <div class="option-row"> <label>Click button to serialize the JSON from the source workbook to the target workbook, with and without the binding source data.</label> </div> <div class="option-row"> <input type="checkbox" id="includeBindingSource" checked="checked" @change="changeIncludeBindingSource" /> <label for="includeBindingSource">includeBindingSource</label> <input type="button" value="Json Serialize" id="fromtoJsonBtn" title="Serialize source spread to JSON and restore from JSON to target spread." @click="serialization" /> </div> </div> </div> </template> <script> import Vue from "vue"; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); import "@grapecity-software/spread-sheets-vue"; import GC from "@grapecity-software/spread-sheets"; import { getData } from "./data"; import "./styles.css"; let App = Vue.extend({ name: "app", data: function() { return { autoGenerateColumns: false, spread: null, spread2: null, includeBindingSource: true }; }, methods: { initSpread: function(spread) { this.spread = spread; spread.suspendPaint(); spread.options.tabStripRatio = 0.6; let sheet1 = spread.getSheet(0); sheet1.name("Sheet data source"); //Table data source let sd = [ { name: "Yang", age: 24 }, { name: "Wang", age: 35 }, { name: "Zhang", age: 20 } ]; let sheet2 = spread.getSheet(1); sheet2.name("Table data source"); sheet2.setDataSource( new GC.Spread.Sheets.Bindings.CellBindingSource({ name: "Yang", age: 24, country: "China", city: "Xi'an", ds: sd }) ); sheet2.setBindingPath(0, 1, "name"); sheet2.setBindingPath(1, 1, "age"); sheet2.setBindingPath(2, 1, "country"); sheet2.setBindingPath(3, 1, "city"); let table = sheet2.tables.add("table1", 4, 1, 1, 1); table.bindingPath("ds"); sd = [ { name: "Yang", age: 24 }, { name: "Wang", age: 35 }, { name: "Zhang", age: 20 } ]; sheet2.tables.addFromDataSource("table2", 9, 1, sd); sheet2.options.allowCellOverflow = true; sheet2.setValue(4, 4, "Table binding to data source"); sheet2.setValue(9, 4, "Table created from data source"); spread.resumePaint(); }, initSpread2(spread) { this.spread2 = spread; }, changeIncludeBindingSource(e) { this.includeBindingSource = e.target.checked; }, serialization(e) { //ToJson let spread1 = this.spread; let jsonStr = JSON.stringify( spread1.toJSON({ includeBindingSource: this.includeBindingSource }) ); //FromJson let spread2 = this.spread2; spread2.fromJSON(JSON.parse(jsonStr)); } }, computed: { dataSource() { return getData(); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script>
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/vue/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/zh/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/zh/lib/vue/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
export function getData() { return [ { "Film": "27 Dresses", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 71, "Profitability": 5.34, "Rating": 40, "Worldwide Gross": 160.30, "Year": 2008 }, { "Film": "(500) Days of Summer", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 81, "Profitability": 8.09, "Rating": 87, "Worldwide Gross": 60.72, "Year": 2009 }, { "Film": "A Dangerous Method", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 89, "Profitability": 0.44, "Rating": 79, "Worldwide Gross": 8.97, "Year": 2011 }, { "Film": "A Serious Man", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 64, "Profitability": 4.38, "Rating": 89, "Worldwide Gross": 30.68, "Year": 2009 }, { "Film": "Across the Universe", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 84, "Profitability": 0.65, "Rating": 54, "Worldwide Gross": 29.36, "Year": 2007 }, { "Film": "Beginners", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 80, "Profitability": 4.47, "Rating": 84, "Worldwide Gross": 14.31, "Year": 2011 }, { "Film": "Dear John", "Genre": "Drama", "Lead Studio": "Sony", "Audience Score %": 66, "Profitability": 4.5988, "Rating": 29, "Worldwide Gross": 114.97, "Year": 2010 }, { "Film": "Enchanted", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 80, "Profitability": 4.00, "Rating": 93, "Worldwide Gross": 340.48, "Year": 2007 }, { "Film": "Fireproof", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 51, "Profitability": 66.93, "Rating": 40, "Worldwide Gross": 33.46, "Year": 2008 }, { "Film": "Four Christmases", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 52, "Profitability": 2.02, "Rating": 26, "Worldwide Gross": 161.83, "Year": 2008 }, { "Film": "Ghosts of Girlfriends Past", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 2.0444, "Rating": 27, "Worldwide Gross": 102.22, "Year": 2009 }, { "Film": "Gnomeo and Juliet", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 52, "Profitability": 5.38, "Rating": 56, "Worldwide Gross": 193.96, "Year": 2011 }, { "Film": "Going the Distance", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 56, "Profitability": 1.31, "Rating": 53, "Worldwide Gross": 42.05, "Year": 2010 }, { "Film": "Good Luck Chuck", "Genre": "Comedy", "Lead Studio": "Lionsgate", "Audience Score %": 61, "Profitability": 2.36, "Rating": 3, "Worldwide Gross": 59.19, "Year": 2007 }, { "Film": "He's Just Not That Into You", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 60, "Profitability": 7.15, "Rating": 42, "Worldwide Gross": 178.84, "Year": 2009 }, { "Film": "High School Musical 3: Senior Year", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 76, "Profitability": 22.91, "Rating": 65, "Worldwide Gross": 252.04, "Year": 2008 }, { "Film": "I Love You Phillip Morris", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 57, "Profitability": 1.34, "Rating": 71, "Worldwide Gross": 20.1, "Year": 2010 }, { "Film": "It's Complicated", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 63, "Profitability": 2.64, "Rating": 56, "Worldwide Gross": 224.6, "Year": 2009 }, { "Film": "Jane Eyre", "Genre": "Romance", "Lead Studio": "Universal", "Audience Score %": 77, "Profitability": null, "Rating": 85, "Worldwide Gross": 30.14, "Year": 2011 }, { "Film": "Just Wright", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 58, "Profitability": 1.79, "Rating": 45, "Worldwide Gross": 21.56, "Year": 2010 }, { "Film": "Killers", "Genre": "Action", "Lead Studio": "Lionsgate", "Audience Score %": 45, "Profitability": 1.24, "Rating": 11, "Worldwide Gross": 93.4, "Year": 2010 }, { "Film": "Knocked Up", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 83, "Profitability": 6.63, "Rating": 91, "Worldwide Gross": 219.00, "Year": 2007 }, { "Film": "Leap Year", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 49, "Profitability": 1.71, "Rating": 21, "Worldwide Gross": 32.59, "Year": 2010 }, { "Film": "Letters to Juliet", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 62, "Profitability": 2.639333333, "Rating": 40, "Worldwide Gross": 79.18, "Year": 2010 }, { "Film": "License to Wed", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 55, "Profitability": 1.98, "Rating": 8, "Worldwide Gross": 69.30, "Year": 2007 }, { "Film": "Life as We Know It", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 62, "Profitability": 2.53, "Rating": 28, "Worldwide Gross": 96.16, "Year": 2010 }, { "Film": "Love & Other Drugs", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 55, "Profitability": 1.81, "Rating": 48, "Worldwide Gross": 54.53, "Year": 2010 }, { "Film": "Love Happens", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 40, "Profitability": 2.00, "Rating": 18, "Worldwide Gross": 36.08, "Year": 2009 }, { "Film": "Made of Honor", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 61, "Profitability": 2.64, "Rating": 13, "Worldwide Gross": 105.96, "Year": 2008 }, { "Film": "Mamma Mia!", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 76, "Profitability": 9.23, "Rating": 53, "Worldwide Gross": 609.47, "Year": 2008 }, { "Film": "Marley and Me", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 77, "Profitability": 3.746781818, "Rating": 63, "Worldwide Gross": 206.073, "Year": 2008 }, { "Film": "Midnight in Paris", "Genre": "Romance", "Lead Studio": "Sony", "Audience Score %": 84, "Profitability": 8.74, "Rating": 93, "Worldwide Gross": 148.66, "Year": 2011 }, { "Film": "Miss Pettigrew Lives for a Day", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 70, "Profitability": 0.25, "Rating": 78, "Worldwide Gross": 15.17, "Year": 2008 }, { "Film": "Monte Carlo", "Genre": "Romance", "Lead Studio": "20th Century Fox", "Audience Score %": 50, "Profitability": 1.98, "Rating": 38, "Worldwide Gross": 39.66, "Year": 2011 }, { "Film": "Music and Lyrics", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 70, "Profitability": 3.64, "Rating": 63, "Worldwide Gross": 145.89, "Year": 2007 }, { "Film": "My Week with Marilyn", "Genre": "Drama", "Lead Studio": "The Weinstein Company", "Audience Score %": 84, "Profitability": 0.82, "Rating": 83, "Worldwide Gross": 8.25, "Year": 2011 }, { "Film": "New Year's Eve", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 48, "Profitability": 2.53, "Rating": 8, "Worldwide Gross": 142.04, "Year": 2011 }, { "Film": "Nick and Norah's Infinite Playlist", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 67, "Profitability": 3.35, "Rating": 73, "Worldwide Gross": 33.52, "Year": 2008 }, { "Film": "No Reservations", "Genre": "Comedy", "Lead Studio": "", "Audience Score %": 64, "Profitability": 3.30, "Rating": 39, "Worldwide Gross": 92.60, "Year": 2007 }, { "Film": "Not Easily Broken", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 66, "Profitability": 2.14, "Rating": 34, "Worldwide Gross": 10.7, "Year": 2009 }, { "Film": "One Day", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 54, "Profitability": 3.68, "Rating": 37, "Worldwide Gross": 55.24, "Year": 2011 }, { "Film": "Our Family Wedding", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 49, "Profitability": null, "Rating": 14, "Worldwide Gross": 21.37, "Year": 2010 }, { "Film": "Over Her Dead Body", "Genre": "Comedy", "Lead Studio": "New Line", "Audience Score %": 47, "Profitability": 2.07, "Rating": 15, "Worldwide Gross": 20.71, "Year": 2008 }, { "Film": "P.S. I Love You", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 82, "Profitability": 5.10, "Rating": 21, "Worldwide Gross": 153.09, "Year": 2007 }, { "Film": "Penelope", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 74, "Profitability": 1.38, "Rating": 52, "Worldwide Gross": 20.74, "Year": 2008 }, { "Film": "Rachel Getting Married", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 61, "Profitability": 1.38, "Rating": 85, "Worldwide Gross": 16.61, "Year": 2008 }, { "Film": "Remember Me", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 70, "Profitability": 3.49, "Rating": 28, "Worldwide Gross": 55.86, "Year": 2010 }, { "Film": "Sex and the City", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 7.22, "Rating": 49, "Worldwide Gross": 415.25, "Year": 2008 }, { "Film": "Sex and the City 2", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 49, "Profitability": 2.88, "Rating": 15, "Worldwide Gross": 288.35, "Year": 2010 }, { "Film": "She's Out of My League", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 60, "Profitability": 2.44, "Rating": 57, "Worldwide Gross": 48.81, "Year": 2010 }, { "Film": "Something Borrowed", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": null, "Profitability": 1.71, "Rating": null, "Worldwide Gross": 60.18, "Year": 2011 }, { "Film": "Tangled", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 88, "Profitability": 1.36, "Rating": 89, "Worldwide Gross": 355.08, "Year": 2010 }, { "Film": "The Back-up Plan", "Genre": "Comedy", "Lead Studio": "CBS", "Audience Score %": 47, "Profitability": 2.20, "Rating": 20, "Worldwide Gross": 77.09, "Year": 2010 }, { "Film": "The Curious Case of Benjamin Button", "Genre": "Fantasy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 1.78, "Rating": 73, "Worldwide Gross": 285.43, "Year": 2008 }, { "Film": "The Duchess", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 68, "Profitability": 3.20, "Rating": 60, "Worldwide Gross": 43.30, "Year": 2008 }, { "Film": "The Heartbreak Kid", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 41, "Profitability": 2.12, "Rating": 30, "Worldwide Gross": 127.76, "Year": 2007 }, { "Film": "The Invention of Lying", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 1.75, "Rating": 56, "Worldwide Gross": 32.4, "Year": 2009 }, { "Film": "The Proposal", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 74, "Profitability": 7.86, "Rating": 43, "Worldwide Gross": 314.7, "Year": 2009 }, { "Film": "The Time Traveler's Wife", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 65, "Profitability": 2.59, "Rating": 38, "Worldwide Gross": 101.33, "Year": 2009 }, { "Film": "The Twilight Saga: New Moon", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 78, "Profitability": 14.19, "Rating": 27, "Worldwide Gross": 709.82, "Year": 2009 }, { "Film": "The Ugly Truth", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 5.40, "Rating": 14, "Worldwide Gross": 205.3, "Year": 2009 }, { "Film": "Twilight", "Genre": "Romance", "Lead Studio": "Summit", "Audience Score %": 82, "Profitability": 10.18, "Rating": 49, "Worldwide Gross": 376.66, "Year": 2008 }, { "Film": "Twilight: Breaking Dawn", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 6.38, "Rating": 26, "Worldwide Gross": 702.17, "Year": 2011 }, { "Film": "Tyler Perry's Why Did I get Married", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 47, "Profitability": 3.72, "Rating": 46, "Worldwide Gross": 55.862886, "Year": 2007 }, { "Film": "Valentine's Day", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 54, "Profitability": 4.18, "Rating": 17, "Worldwide Gross": 217.57, "Year": 2010 }, { "Film": "Waiting For Forever", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 53, "Profitability": 0.005, "Rating": 6, "Worldwide Gross": 0.025, "Year": 2011 }, { "Film": "Waitress", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 67, "Profitability": 11.08, "Rating": 89, "Worldwide Gross": 22.17, "Year": 2007 }, { "Film": "WALL-E", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 89, "Profitability": 2.89, "Rating": 96, "Worldwide Gross": 521.28, "Year": 2008 }, { "Film": "Water For Elephants", "Genre": "Drama", "Lead Studio": "20th Century Fox", "Audience Score %": 72, "Profitability": 3.081421053, "Rating": 60, "Worldwide Gross": 117.094, "Year": 2011 }, { "Film": "What Happens in Vegas", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 72, "Profitability": 6.26, "Rating": 28, "Worldwide Gross": 219.36, "Year": 2008 }, { "Film": "When in Rome", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 44, "Profitability": 0, "Rating": 15, "Worldwide Gross": 43.04, "Year": 2010 }, { "Film": "You Will Meet a Tall Dark Stranger", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 35, "Profitability": 1.21, "Rating": 43, "Worldwide Gross": 26.66, "Year": 2010 }, { "Film": "Youth in Revolt", "Genre": "Comedy", "Lead Studio": "The Weinstein Company", "Audience Score %": 52, "Profitability": 1.09, "Rating": 68, "Worldwide Gross": 19.62, "Year": 2010 }, { "Film": "Zack and Miri Make a Porno", "Genre": "Romance", "Lead Studio": "The Weinstein Company", "Audience Score %": 70, "Profitability": 1.74, "Rating": 64, "Worldwide Gross": 41.94, "Year": 2008 } ]; }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets-container { width: calc(100% - 280px); height: 600px; overflow: hidden; float: left; } .sample-spreadsheets { width: 100%; height: 260px; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function(global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-vue': 'npm:@grapecity-software/spread-sheets-vue/index.js', '@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);