创建一个普通组合框单元格，请参照以下代码：
你可以使用 editorValueType 方法来设置或者获取被写入底层数据模型的值。这种编辑值的类型是一个枚举 EditorValueType。
text: 将选中的项目的文本值写入数据模型中。
index: 将选中的项目的下标写入数据模型中。
value: 将选中的项目相应的数据值写入数据模型中.
不同的 editorValueType 编辑类型形成了不同的编辑值。组合框的值取决于下拉列表中的项目。你可以使用 items 方法来获取或者设置项目。例如：
你可以使用 editable 方法设置是否容许用户在复选框上进行输入。默认值是 false，这种情况下只能进行选择操作。例如：
你可以使用 itemHeight 方法来设置下拉列表项目的高度。例如：
使用allowFloat方法来设置是否允许下拉列表浮动在Spread之外。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function Country(shortName, fullName) {
this.value = this.shortName = shortName;
this.text = this.fullName = fullName;
}
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getActiveSheet();
sheet.bind(spreadNS.Events.SelectionChanged, function () {
propertyChange(false);
});
sheet.suspendPaint();
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(1, 200);
var 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");
var 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");
var 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();
_getElementById("changeProperty").addEventListener('click', function () {
propertyChange(true);
});
function propertyChange(isSet) {
var sheet = spread.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var comboBoxCellType = sheet.getCellType(sel.row, sel.col);
if (!(comboBoxCellType instanceof spreadNS.CellTypes.ComboBox)) {
_getElementById("changeProperty").setAttribute("disabled", 'disabled');
return;
}
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("selComboCellEditorValueType").value=comboBoxCellType.editorValueType();
var items = comboBoxCellType.items(), text = '', value = '';
for (var i = 0, len = items.length; i < len; i++) {
var item = items[i];
if (!item) {
continue;
}
if (item.text) {
text += item.text + ',';
}
if (item.value) {
value += item.value + ',';
}
}
_getElementById("txtComboCellItemsText").value=text.slice(0, text.length - 1);
_getElementById("txtComboCellItemsValue").value=value.slice(0, value.length - 1);
_getElementById("chkEditable").checked=comboBoxCellType.editable();
_getElementById("chkAllowFloat").checked = comboBoxCellType.allowFloat();
_getElementById("txtItemHeight").value="" + comboBoxCellType.itemHeight();
} else {
comboBoxCellType.editorValueType(parseInt(_getElementById("selComboCellEditorValueType").value));
var itemsText = _getElementById("txtComboCellItemsText").value.split(",");
var itemsValue = _getElementById("txtComboCellItemsValue").value.split(",");
var itemsLength = itemsText.length > itemsValue.length ? itemsText.length : itemsValue.length;
var items = [];
for (var count = 0; count < itemsLength; count++) {
var t = itemsText.length > count && itemsText[0] != "" ? itemsText[count] : undefined;
var 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 };
}
}
comboBoxCellType.items(items);
comboBoxCellType.editable(_getElementById("chkEditable").checked);
comboBoxCellType.allowFloat(_getElementById("chkAllowFloat").checked);
var itemHeight = parseInt(_getElementById("txtItemHeight").value, 10);
if (!isNaN(itemHeight) && itemHeight > 0) {
comboBoxCellType.itemHeight(itemHeight);
}
}
}
sheet.repaint();
}
function getActualRange(range, maxRowCount, maxColCount) {
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<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>EditorValueType: </label>
<select id="selComboCellEditorValueType">
<option value="0" selected="selected">Text</option>
<option value="1">Index</option>
<option value="2">Value</option>
</select>
</div>
<div class="option-row">
<label>Items Text:</label>
<input id="txtComboCellItemsText" type="text" />
</div>
<div class="option-row">
<label>Items Value:</label>
<input id="txtComboCellItemsValue" type="text" />
</div>
<div class="option-row">
<label>Item Height:</label>
<input id="txtItemHeight" type="text" />
</div>
<div class="option-row">
<label></label>
<input type="checkbox" id="chkEditable" />
<label for="chkEditable">Editable</label>
</div>
<div class="option-row">
<label></label>
<input type="checkbox" id="chkAllowFloat" />
<label for="chkAllowFloat">Allow Float</label>
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="Update" />
</div>
</div>
</div>
</body>
</html>
.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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.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;
}
