按钮列表

与复选框列表和单选列表用法相似,但是按钮列表可以单选或多选。

使用以下代码创建一个buttonList单元格: ButtonList Cell Type 包括 items, isFlowLayout, maxRowCount, maxColumnCount, itemSpacing, 和 direction 等方法, 与 Radio List Cell Type 和 Checkbox List Cell Type 类似。 你可以使用 padding 方法以类似于css的格式以像素为单位获取或设置padding。 你可以使用 selectedBackColor 和 selectedForeColor 方法配置已选择的样式。 你可以使用 selectionMode 方法设置单选或者多选模式。
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.ButtonList()); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var radio = new GC.Spread.Sheets.CellTypes.ButtonList(); 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.ButtonList) { readSetting(cellType); } else { readSetting(new GC.Spread.Sheets.CellTypes.ButtonList()); } }); _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(); }); }; 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.selectionMode() === GC.Spread.Sheets.CellTypes.SelectionMode.signle) { _getElementById("selectionMode-single").checked = true; } else { _getElementById("selectionMode-multiple").checked = true; } if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) { _getElementById("direction-horizontal").checked = true; } else { _getElementById("direction-vertical").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("padding").value = cellType.padding(); _getElementById("selectedBackColor").value = cellType.selectedBackColor(); _getElementById("selectedForeColor").value = cellType.selectedForeColor(); 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.ButtonList(); 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("selectionMode-single").checked) { cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single); } else { cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.multiple); } if (_getElementById("direction-horizontal").checked) { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal); } else { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical); } 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 }); cellType.padding(_getElementById("padding").value); cellType.selectedBackColor(_getElementById("selectedBackColor").value); cellType.selectedForeColor(_getElementById("selectedForeColor").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="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> <div class="option-row"> <label>Selection Mode:</label> </div> <div class="option-row"> <input type="radio" name="selectionMode" id="selectionMode-single" checked="checked" /><label for="selectionMode-single">single</label> <input type="radio" name="selectionMode" id="selectionMode-multiple" /><label for="selectionMode-multiple">multiple</label> </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 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> <div class="option-row"> <label for="padding">Padding:</label> <input type="text" id="padding" value="2" /> </div> <div class="option-row"> <label for="selectedBackColor">Selected BackColor:</label> <input type="text" id="selectedBackColor" value="2" /> </div> <div class="option-row"> <label for="selectedForeColor">Selected ForeColor:</label> <input type="text" id="selectedForeColor" value="2" /> </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; } .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; }