コンボボックス型セルを作成するには、次の例のようなコードを使用します。
基になるデータモデルに書き込まれる値を取得および設定するには、editorValueTypeメソッドを使用します。この設定には、EditorValueType列挙値を使用します。
text: 選択された項目のテキスト値をモデルに書き込みます。
index: 選択された項目のインデックスをモデルに書き込みます。
value: 選択された項目の対応するデータ値をモデルに書き込みます。
それぞれのeditorValueType設定により、対応する種類のエディタ値が作成されます。コンボボックスの値は、コンボボックス内のドロップダウンリストの項目に応じて決まります。リストの項目を取得および設定するには、itemsメソッドを使用します。次に、例を示します。
コンボボックスエディタへの、ユーザーによる入力を有効にするかどうかを指定するには、editableメソッドを使用します。デフォルト値はfalseであり、項目の選択だけが許可されます。次に、例を示します。
ドロップダウンリスト内の各項目の高さを設定するには、itemHeightメソッドを使用します。次に、例を示します。
allowFloatメソッドを使用して、ドロップダウンをスプレッドシートの外にフロー表示するかどうかを設定します。
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="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>Spreadのいずれかのコンボボックス型セルを選択してください。以下のテキストボックスを使用して、各オプションを編集します。</label>
<div class="option-row">
<label>値の種類: </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 >アイテムのテキスト:</label>
<input id="txtComboCellItemsText" type="text" />
</div>
<div class="option-row">
<label>アイテムの値:</label>
<input id="txtComboCellItemsValue" type="text" />
</div>
<div class="option-row">
<label>アイテムの高さ:</label>
<input id="txtItemHeight" type="text" />
</div>
<div class="option-row">
<label></label>
<input type="checkbox" id="chkEditable" />
<label for="chkEditable">編集可能</label>
</div>
<div class="option-row">
<input id="chkAllowFloat" type="checkbox" />
<label for="chkAllowFloat">ドロップダウンをフロー表示:</label>
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="更新"/>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
