チェックボックスリスト型セル

チェックボックスリスト型セルを使用すると、ユーザーはセル内にあるオプションのリストから複数のアイテムを選択できます。

次のコードを使用して、チェックボックスリスト型セルを作成します。 チェックボックスリスト型セルには、 ラジオボタンリスト型セルと同じメソッドがあります。
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); initEvent(spread); readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList()); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var radio = new GC.Spread.Sheets.CellTypes.CheckBoxList(); radio.items([ { text: "sample1", value: "0" }, { text: "sample2", value: "1" }, { text: "sample3", value: "2" }, ]); sheet.setCellType(0, 1, radio); sheet.defaults.rowHeight = 50; sheet.defaults.colWidth = 200; sheet.resumePaint(); }; function initEvent(spread) { spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () { var sheet = spread.getActiveSheet(); var row = sheet.getActiveRowIndex(); var column = sheet.getActiveColumnIndex(); var cellType = sheet.getCellType(row, column); if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBoxList) { readSetting(cellType); } else { readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList()); } }); _getElementById("apply").addEventListener('click', function () { applySetting(); }); _getElementById("addItem").addEventListener('click', function () { var select = _getElementById("items"); var d = new Date(); d.setMonth(d.getMonth() + select.length); var str = d.getFullYear() + "-" + (d.getMonth() + 1); _getElementById("items").add(new Option(str, select.length)); }); _getElementById("removeItem").addEventListener('click', function () { var select = _getElementById("items"); select[select.selectedIndex].remove(); }); _getElementById("direction-horizontal").addEventListener('change', function () { refreshMaxCountVisible(); }); _getElementById("direction-vertical").addEventListener('change', function () { refreshMaxCountVisible(); }); _getElementById("isFlowLayout").addEventListener('change', function () { refreshMaxCountVisible(); }); }; function readSetting(cellType) { var select = _getElementById("items"); select.options.length = 0; var items = cellType.items(); for(var i=0; i<items.length; i++){ select.add(new Option(items[i].text, items[i].value)); } if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) { _getElementById("direction-horizontal").checked = true; } else { _getElementById("direction-vertical").checked = true; } if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) { _getElementById("textAlign-right").checked = true; } else { _getElementById("textAlign-left").checked = true; } _getElementById("isFlowLayout").checked = cellType.isFlowLayout(); _getElementById("rowCount").value = cellType.maxRowCount(); _getElementById("columnCount").value = cellType.maxColumnCount(); _getElementById("space-horizontal").value = cellType.itemSpacing().horizontal; _getElementById("space-vertical").value = cellType.itemSpacing().vertical; refreshMaxCountVisible(); } function refreshMaxCountVisible() { if (_getElementById("isFlowLayout").checked) { _getElementById("rowCountDiv").style.display="none"; _getElementById("columnCountDiv").style.display="none"; } else if (_getElementById("direction-vertical").checked) { _getElementById("rowCountDiv").style.display="block"; _getElementById("columnCountDiv").style.display="none"; } else { _getElementById("rowCountDiv").style.display="none"; _getElementById("columnCountDiv").style.display="block"; } } function applySetting() { var sheet = spread.getActiveSheet(); var row = sheet.getActiveRowIndex(); var column = sheet.getActiveColumnIndex(); var cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList(); var items = []; var select = _getElementById("items"); for (var i = 0; i < select.length; i++) { items.push({ text: select[i].text, value: select[i].value }); } cellType.items(items); if (_getElementById("direction-horizontal").checked) { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal); } else { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical); } if (_getElementById("textAlign-right").checked) { cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right); } else { cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left); } cellType.isFlowLayout(_getElementById("isFlowLayout").checked); if (_getElementById("rowCount").value) { cellType.maxRowCount(_getElementById("rowCount").value); } if (_getElementById("columnCount").value) { cellType.maxColumnCount(_getElementById("columnCount").value); } cellType.itemSpacing({ horizontal: _getElementById("space-horizontal").value, vertical: _getElementById("space-vertical").value }); sheet.getCell(row, column).cellType(cellType); } 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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/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"> <div class="option-row"> <p>以下のオプションを変更し、設定ボタンを押して変更を適用します。</p> <label>アイテム:</label> </div> <div class="option-row"> <select id="items" size="5"></select> <input type="button" id="addItem" value="追加" /> <input type="button" id="removeItem" value="削除" /> </div> <hr> <div class="option-row"> <label>方向:</label> </div> <div class="option-row"> <input type="radio" name="direction" id="direction-horizontal" checked="checked" /><label for="direction-horizontal">horizontal</label> <input type="radio" name="direction" id="direction-vertical" /><label for="direction-vertical">vertical</label> </div> <div class="option-row"> <label>テキスト位置:</label> </div> <div class="option-row"> <input type="radio" name="textAlign" id="textAlign-left" checked="checked" /><label for="textAlign-left">left</label> <input type="radio" name="textAlign" id="textAlign-right" /><label for="textAlign-right">right</label> </div> <hr> <div class="option-row"> <label for="isFlowLayout">フローレイアウト</label> <input type="checkbox" id="isFlowLayout" checked /> </div> <div class="option-row" id="rowCountDiv"> <label for="rowCount">最大行数:</label> <input type="text" id="rowCount" value="2" /> </div> <div class="option-row" id="columnCountDiv"> <label for="columnCount">最大列数:</label> <input type="text" id="columnCount" value="2" /> </div> <div class="option-row"> <label for="space-horizontal">水平方向の間隔:</label> <input type="text" id="space-horizontal" value="8" /> </div> <div class="option-row"> <label for="space-vertical">垂直方向の間隔:</label> <input type="text" id="space-vertical" value="2" /> </div> <div class="option-row"> <input type="button" id="apply" 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 { font-size: 14px; padding: 5px; } .option-row { padding-bottom: 5px; } label { display:inline-block; } input{ padding: 4px 8px; box-sizing: border-box; } select{ width: 100%; } input[type=checkbox]+label { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }