创建一个普通组合框单元格，请参照以下代码：
你可以使用 editorValueType 方法来设置或者获取被写入底层数据模型的值。这种编辑值的类型是一个枚举 EditorValueType。
text: 将选中的项目的文本值写入数据模型中。
index: 将选中的项目的下标写入数据模型中。
value: 将选中的项目相应的数据值写入数据模型中.
不同的 editorValueType 编辑类型形成了不同的编辑值。组合框的值取决于下拉列表中的项目。你可以使用 items 方法来获取或者设置项目。例如：
你可以使用 editable 方法设置是否容许用户在复选框上进行输入。默认值是 false，这种情况下只能进行选择操作。例如：
你可以使用 itemHeight 方法来设置下拉列表项目的高度。例如：
使用allowFloat方法来设置是否允许下拉列表浮动在Spread之外。
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<label>Select one of the combo box cells in Spread and edit its options with these text boxes.</label>
<div class="option-row">
<label>Editor Value Type:</label>
<select id="editorValueType" v-model="editorValueType">
<option v-for="(key, index) in editorValueTypeList" :value="index" :key="key">{{key.charAt(0).toUpperCase()+
key.slice(1)}}</option>
</select>
</div>
<div class="option-row">
<label for="itemsText">Items Text:</label>
<input id="itemsText" type="text" v-model="itemsText" />
</div>
<div class="option-row">
<label for="itemsValue">Items Value:</label>
<input id="itemsValue" type="text" v-model="itemsValue" />
</div>
<div class="option-row">
<label for="itemHeight">Item Height:</label>
<input id="itemHeight" type="text" v-model="itemHeight" />
</div>
<div class="option-row">
<input id="editable" type="checkbox" v-model="editable" />
<label for="editable">Editable:</label>
</div>
<div class="option-row">
<input id="allowFloat" type="checkbox" v-model="allowFloat" />
<label for="allowFloat">Allow Float:</label>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" :disabled="disabled" @click="propertyChange($event, true)" />
</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 "./styles.css";
const spreadNS = GC.Spread.Sheets;
function Country(shortName, fullName) {
this.value = this.shortName = shortName;
this.text = this.fullName = fullName;
}
let App = Vue.extend({
name: "app",
data: function() {
return {
editorValueType: 0,
itemsText: '',
itemsValue: '',
itemHeight: 0,
editable: false,
allowFloat: true,
disabled: false,
spread: null,
editorValueTypeList: Object.keys(GC.Spread.Sheets.CellTypes.EditorValueType).filter(key => isNaN(Number(key)))
};
},
methods: {
initSpread(spread) {
this.spread = spread;
const sheet = spread.getActiveSheet();
sheet.bind(spreadNS.Events.SelectionChanged, (e) => {
this.propertyChange(e);
});
sheet.suspendPaint();
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(1, 200);
const combo = new spreadNS.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }])
.editorValueType(spreadNS.CellTypes.EditorValueType.text);
sheet.setValue(0, 3, "Result:");
sheet.getCell(1, 2, spreadNS.SheetArea.viewport).cellType(combo).value("Apples");
sheet.setValue(1, 1, "ComboBoxCellType");
sheet.setFormula(1, 3, "=C2");
const editableCombo = new spreadNS.CellTypes.ComboBox(),
data = [new Country("CN", "China"), new Country("JP", "Japan"), new Country("US", "United States")];
editableCombo.editable(true)
.items(data)
.itemHeight(24)
.editorValueType(spreadNS.CellTypes.EditorValueType.value);
sheet.getCell(3, 2, spreadNS.SheetArea.viewport).cellType(editableCombo).value("US");
sheet.setValue(3, 1, "Editable ComboBoxCellType");
sheet.setFormula(3, 3, "=C4");
const allowFloatCombo = new spreadNS.CellTypes.ComboBox();
allowFloatCombo.items(Array.from({ length: 100 }, (_, index) => {
return { text: index + 1, value: index + 1 };
}));
sheet.getCell(22, 2).cellType(allowFloatCombo);
sheet.setValue(22, 1, "Try Allow Float ComBoxCellType");
sheet.resumePaint();
},
propertyChange(e, settings) {
const sheet = this.spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const comboBoxCellType = sheet.getCellType(sel.row, sel.col);
if (!(comboBoxCellType instanceof spreadNS.CellTypes.ComboBox)) {
this.disabled = true;
return;
}
if (!settings) {
this.disabled = false;
this.editorValueType = comboBoxCellType.editorValueType();
const items = comboBoxCellType.items();
const { texts, values } = this.getTextAndValueStringArray(items);
this.itemsText = texts;
this.itemsValue = values;
this.editable = comboBoxCellType.editable();
this.itemHeight = comboBoxCellType.itemHeight();
this.allowFloat = comboBoxCellType.allowFloat();
} else {
comboBoxCellType.editorValueType(Number(this.editorValueType));
const itemsText = this.itemsText.split(",");
const itemsValue = this.itemsValue.split(",");
const itemsLength = itemsText.length > itemsValue.length ? itemsText.length : itemsValue.length;
const items = this.getTextAndValueArray(itemsText, itemsValue, itemsLength);
comboBoxCellType.items(items);
comboBoxCellType.editable(this.editable);
comboBoxCellType.allowFloat(this.allowFloat);
const itemHeight = Number(this.itemHeight);
if (!isNaN(itemHeight) && itemHeight > 0) {
comboBoxCellType.itemHeight(itemHeight);
}
}
}
sheet.repaint();
},
getActualRange(range, maxRowCount, maxColCount) {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
},
getTextAndValueStringArray(items) {
let texts = '', values = '';
for (let i = 0, len = items.length; i < len; i++) {
const item = items[i];
if (!item) {
continue;
}
if (item.text) {
texts += item.text + ',';
}
if (item.value) {
values += item.value + ',';
}
}
texts = texts.slice(0, texts.length - 1);
values = values.slice(0, values.length - 1);
return { texts, values };
},
getTextAndValueArray(itemsText, itemsValue, itemsLength) {
const items = [];
for (let count = 0; count < itemsLength; count++) {
const t = itemsText.length > count && itemsText[0] != "" ? itemsText[count] : undefined;
const v = itemsValue.length > count && itemsValue[0] != "" ? itemsValue[count] : undefined;
if (t != undefined && v != undefined) {
items[count] = { text: t, value: v };
}
else if (t != undefined) {
items[count] = { text: t };
} else if (v != undefined) {
items[count] = { value: v };
}
}
return items;
}
}
});
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 [
{ name: "Stoves S0", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Computers C1", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Washers W3", line: "Washers", color: "Green", discontinued: true, rating: "Average" }
]
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 90%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row{
padding-bottom: 12px;
}
label {
padding-bottom: 4px;
display: block;
}
input,
select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
input[type=checkbox] + label {
display: inline-block;
width: auto;
user-select: none;
}
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);
