表单级别绑定

SpreadJS 支持绑定数据源到表单(绑定类型有表单级别绑定和单元格级别绑定。)

你可以使用 setDataSource 和 getDataSource 方法来设置获取数据源。 在设置数据源之前, 你可以使用 autoGenerateColumns 方法来控制是否自动生成绑定列。 例如: 你也可以使用 getDataItem 方法来获取指定行的数据信息。 你可以像这个例子版将数据字段绑定到指定的列:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet> </gc-worksheet> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> </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 './styles.css'; let App = Vue.extend({ name: "app", data: function() { return { spread: null }; }, methods: { getProducts(count) { const _lines = ["Computers", "Washers", "Stoves"]; const _colors = ["Red", "Green", "Blue", "White"]; const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"]; var dataList = []; for (var i = 1; i <= count; i++) { var line = _lines[Math.floor(Math.random() * 3)]; dataList[i - 1] = new Product(i, line, _colors[Math.floor(Math.random() * 4)], line + " " + line.charAt(0) + i, Math.floor(Math.random() * 5001) / 10.0 + 500, Math.floor(Math.random() * 6001) / 10.0, Math.floor(Math.random() * 10001) / 100.0, !!(Math.random() > 0.5), _ratings[Math.floor(Math.random() * 6)]); } return dataList; }, initSpread(spread) { spread.suspendPaint(); spread.options.tabStripRatio = 0.8; var products = this.getProducts(100); var sheet = spread.getSheet(0); sheet.name("Default binding"); sheet.setDataSource(products); var sheet2 = spread.getSheet(1); sheet2.name("Custom binding"); sheet2.autoGenerateColumns = false; sheet2.setDataSource(products); var colInfos = [ { name: "id", displayName: "ID" }, { name: "name", displayName: "Name", size: 100 }, { name: "line", displayName: "Line", size: 80 }, { name: "color", displayName: "Color" }, { name: "price", displayName: "Price", formatter: "0.00", size: 80 }, { name: "cost", displayName: "Cost", formatter: "0.00", size: 80 }, { name: "weight", displayName: "Weight", formatter: "0.00", size: 80 }, { name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 }, { name: "rating", displayName: "Rating" } ]; sheet2.bindColumns(colInfos); spread.resumePaint(); } } }); class Product { constructor(id, line, color, name, price, cost, weight, discontinued, rating) { this.id = id; this.line = line; this.color = color; this.name = name; this.price = price; this.cost = cost; this.weight = weight; this.discontinued = discontinued; this.rating = rating; } } 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" style="height: 100%;"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { height: 100%; }
(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);