复选框列表

复选框列表单元格类型使用户能够从单元格中列出的选项中选择单个或者多个项目。

使用以下代码创建复选框列表单元格: Checkbox List 拥有和 Radio List 相同的方法。 例如:
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.length - 1].remove(); }); _getElementById("direction-horizontal").addEventListener('change', function () { refreshMaxCountVisible(); }); _getElementById("direction-vertical").addEventListener('change', function () { refreshMaxCountVisible(); }); _getElementById("isFlowLayout").addEventListener('change', function () { refreshMaxCountVisible(); }); _getElementById("boxSize").addEventListener('change', function () { applySetting(); }) }; 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; _getElementById("boxSize").value = cellType.boxSize(); 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 }); var boxSizeValue = _getElementById("boxSize").value; var boxSize = Number(boxSizeValue); if (isNaN(boxSize)) { cellType.boxSize(boxSizeValue); } else { cellType.boxSize(boxSize); } 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="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"> <div class="option-row"> <p>Change any options below then press the Set button to apply your changes.</p> <label>Items:</label> </div> <div class="option-row"> <select id="items" size="5"></select> <input type="button" id="addItem" value="Add" /> <input type="button" id="removeItem" value="Remove" /> </div> <hr> <div class="option-row"> <label>Direction:</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>Text Align:</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">Flow Layout</label> <input type="checkbox" id="isFlowLayout" checked /> </div> <div class="option-row" id="rowCountDiv"> <label for="rowCount">Max Row Count:</label> <input type="text" id="rowCount" value="2" /> </div> <div class="option-row" id="columnCountDiv"> <label for="columnCount">Max Column Count:</label> <input type="text" id="columnCount" value="2" /> </div> <div class="option-row"> <label for="space-horizontal">Item horizontal Spacing:</label> <input type="text" id="space-horizontal" value="8" /> </div> <div class="option-row"> <label for="space-vertical">Item vertical Spacing:</label> <input type="text" id="space-vertical" value="2" /> </div> <hr> <div class="option-row"> <label for="boxSize">Box Size</label> <input type="text" id="boxSize" class="boxSize" /> </div> <div class="option-row"> <input type="button" id="apply" value="Set" /> </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; } .boxSize{ display: block; } .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; }