다음 코드를 사용하여 buttonList 셀을 만듭니다.
라디오 목록 셀 유형 및 체크박스 목록 셀 유형과 비슷하게 버튼 목록 셀 유형에는 items, isFlowLayout, maxRowCount, maxColumnCount, itemSpacing 및 direction 메서드가 포함됩니다.
padding 메서드를 사용하여 CSS와 유사한 형식이 포함된 픽셀 단위의 패딩을 가져오거나 설정할 수 있습니다.
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="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}