다음 코드를 사용하여 체크박스 목록 셀을 만듭니다.
체크박스 목록에는 라디오 목록과 동일한 메서드가 포함됩니다.
예:
mode 메서드를 사용하여 체크박스 리스트 모드를 가져오거나 설정할 수 있습니다. cellType에는 "checkbox" 또는 "toggle"을 설정할 수 있습니다.
toggleOptions 메서드를 사용하여 체크박스 리스트의 토글 옵션을 가져오거나 설정할 수 있습니다. 매개변수 타입은 GC.Spread.Sheets.CellTypes.IToggleOptions를 참고하세요.
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 initCellStyle(fontSize, foreColor = '#000000', backColor = '#ffffff', bold=true) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `${bold ? 'bold' : 'normal'} ${fontSize}pt Calibri`;
style.foreColor = foreColor;
style.backColor = backColor;
return style;
}
function initLayoutStyle(sheet) {
sheet.setRowCount(11);
sheet.setColumnCount(10);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setRowHeight(0, 30);
sheet.setRowHeight(1, 50);
sheet.setRowHeight(2, 40);
sheet.setRowHeight(3, 40);
sheet.setRowHeight(4, 40);
sheet.setRowHeight(5, 40);
sheet.setRowHeight(6, 40);
sheet.setRowHeight(7, 40);
sheet.setRowHeight(8, 40);
sheet.setRowHeight(9, 40);
sheet.setRowHeight(10, 30);
sheet.setColumnWidth(0, 30);
sheet.setColumnWidth(1, 110);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 100);
sheet.setColumnWidth(6, 100);
sheet.setColumnWidth(7, 100);
sheet.setColumnWidth(8, 100);
sheet.setColumnWidth(9, 30);
sheet.addSpan(1, 1, 1, 8);
sheet.setValue(1, 1, "Inventory List");
sheet.getCell(1, 1).setStyle(initCellStyle(24, "Text 2 -50", "Text 2 40"));
sheet.setValue(2, 1, "Filter Row");
sheet.getCell(2, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(2, 2, 1, 7);
sheet.getCell(2, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(2, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
sheet.setValue(3, 1, "Filter Row");
sheet.getCell(3, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(3, 2, 1, 7);
sheet.getCell(3, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(3, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
}
function initData(sheet) {
sheet.setValue(4, 1, "Inventory ID");
sheet.setValue(4, 2, "Name");
sheet.setValue(4, 3, "Unit Price");
sheet.setValue(4, 4, "Quantity In Stock");
sheet.setValue(4, 5, "Inventory Value");
sheet.setValue(4, 6, "Reorder Level");
sheet.setValue(4, 7, "Reorder Time In Days");
sheet.setValue(4, 8, "Reorder Quantity");
sheet.setValue(2, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(3, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(5, 1, "IN0001");
sheet.setValue(5, 2, "Item 1");
sheet.setValue(5, 3, "51");
sheet.setValue(5, 4, "25");
sheet.setValue(5, 5, "1275");
sheet.setValue(5, 6, "29");
sheet.setValue(5, 7, "13");
sheet.setValue(5, 8, "50");
sheet.setValue(6, 1, "IN0002");
sheet.setValue(6, 2, "Item 2");
sheet.setValue(6, 3, "93");
sheet.setValue(6, 4, "132");
sheet.setValue(6, 5, "12276");
sheet.setValue(6, 6, "231");
sheet.setValue(6, 7, "4");
sheet.setValue(6, 8, "50");
sheet.setValue(7, 1, "IN0003");
sheet.setValue(7, 2, "Item 3");
sheet.setValue(7, 3, "57");
sheet.setValue(7, 4, "151");
sheet.setValue(7, 5, "8607");
sheet.setValue(7, 6, "114");
sheet.setValue(7, 7, "11");
sheet.setValue(7, 8, "150");
sheet.setValue(8, 1, "IN0004");
sheet.setValue(8, 2, "Item 4");
sheet.setValue(8, 3, "75");
sheet.setValue(8, 4, "62");
sheet.setValue(8, 5, "4650");
sheet.setValue(8, 6, "39");
sheet.setValue(8, 7, "12");
sheet.setValue(8, 8, "50");
sheet.setValue(9, 1, "IN0005");
sheet.setValue(9, 2, "Item 5");
sheet.setValue(9, 3, "100");
sheet.setValue(9, 4, "100");
sheet.setValue(9, 5, "10000");
sheet.setValue(9, 6, "100");
sheet.setValue(9, 7, "10");
sheet.setValue(9, 8, "100");
for(var i = 1; i < 9; i++) {
sheet.getCell(4, i).setStyle(initCellStyle(11, "Accent 1 -75", "Text 2 60"));
for(var j = 5; j < 10; j++) {
sheet.getCell(j, i).setStyle(initCellStyle(11, undefined, "Accent 1 80", false));
}
}
for (let i = 4; i < 10; i++) {
for(var j = 1; j < 10; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.getCell(i, j).wordWrap(true);
}
}
}
function bindEvent(spread) {
let sheet = spread.getActiveSheet();
var range = new GC.Spread.Sheets.Range(5, 1, 5, 1);
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);
rowFilter.filterButtonVisible(false);
spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
if ((info.row === 2 || info.row === 3) && info.col === 2) {
if (info.row === 2) {
sheet.setValue(3, 2, info.newValue);
} else {
sheet.setValue(2, 2, info.newValue);
}
rowFilter.removeFilterItems(1);
if (info.newValue.length > 0) {
for(var i = 0; i < info.newValue.length; i++) {
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
expected: 'IN000' + info.newValue[i]
});
rowFilter.addFilterItem(1, condition);
}
}
rowFilter.filter(1);
sheet.invalidateLayout();
sheet.repaint();
}
});
}
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
bindEvent(spread);
initLayoutStyle(sheet);
var radio = new GC.Spread.Sheets.CellTypes.CheckBoxList();
radio.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
sheet.setCellType(2, 2, radio);
sheet.getCell(2, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var toggle = new GC.Spread.Sheets.CellTypes.CheckBoxList();
toggle.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
toggle.mode('toggle');
toggle.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
toggle.toggleOptions({
width: 30,
height: 15,
animationDuration: 300,
trackColorOn: "Text 2 40",
trackColorOff: "Background 2 -10",
sliderColorOn: "Text 2 -50",
sliderColorOff: "Background 1",
});
sheet.setCellType(3, 2, toggle);
sheet.getCell(3, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
initData(sheet);
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();
})
_getElementById("checkBoxListMode").addEventListener('change', function () {
const mode = _getElementById("checkBoxListMode").value;
const cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
if(mode === 'toggle') {
cellType.mode('toggle');
} else {
cellType.mode('checkbox');
}
readSetting(cellType);
})
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function (e) {
_getElementById("toggleCheckBoxCellWidth").toggleAttribute('disabled', e.target.checked);
_getElementById("toggleCheckBoxCellHeight").toggleAttribute('disabled', e.target.checked);
})
};
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.mode() === 'toggle') {
_getElementById("toggleOptions").style.display = 'block';
_getElementById("checkboxListBoxSize").style.display = 'none';
_getElementById("checkBoxListMode").value = 'toggle';
_getElementById("checkboxTextAlign").style.display = 'none';
_getElementById("toggleTextAlign").style.display = 'block';
} else {
_getElementById("toggleOptions").style.display = 'none';
_getElementById("checkboxListBoxSize").style.display = 'block';
_getElementById("checkBoxListMode").value = 'checkbox';
_getElementById("checkboxTextAlign").style.display = 'block';
_getElementById("toggleTextAlign").style.display = 'none';
}
const textAlignId = cellType.mode() === 'toggle' ? 'toggle-textAlign-' : 'textAlign-';
if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) {
_getElementById(textAlignId + 'right').checked = true;
} else if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.inside) {
_getElementById(textAlignId + 'inside').checked = true;
} else {
_getElementById(textAlignId + '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();
const mode = _getElementById("checkBoxListMode").value;
cellType.mode(mode);
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);
}
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
});
if (mode === 'toggle') {
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
cellType.toggleOptions({
autoSize: _getElementById("toggleCheckBoxCellAutoSize").checked,
width: _getElementById("toggleCheckBoxCellWidth").value - 0,
height: _getElementById("toggleCheckBoxCellHeight").value - 0,
sliderMargin: _getElementById("toggleCheckBoxCellSliderMargin").value - 0,
sliderRadius: sliderRadius === '' ? null : (sliderRadius - 0),
trackRadius: trackRadius === '' ? null : (trackRadius - 0),
sliderColorOn: _getElementById("toggleCheckBoxCellSliderColorOn").value,
sliderColorOff: _getElementById("toggleCheckBoxCellSliderColorOff").value,
trackColorOn: _getElementById("toggleCheckBoxCellTrackColorOn").value,
trackColorOff: _getElementById("toggleCheckBoxCellTrackColorOff").value,
animationDuration: _getElementById("toggleCheckBoxCellAnimationDuration").value - 0,
});
if (_getElementById("toggle-textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else if (_getElementById("toggle-textAlign-inside").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.inside);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
} else {
if (_getElementById("textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
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="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>
<hr>
<div class="option-row">
<label>Mode:</label>
</div>
<div class="option-row">
<select id="checkBoxListMode">
<option value="checkbox" selected="selected">checkbox</option>
<option value="toggle">toggle</option>
</select>
</div>
<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 id="checkboxTextAlign" 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>
<div id="toggleTextAlign" class="option-row" style="display: none;">
<input type="radio" name="textAlign" id="toggle-textAlign-left" checked="checked" /><label for="toggle-textAlign-left">left</label>
<input type="radio" name="textAlign" id="toggle-textAlign-right" /><label for="toggle-textAlign-right">right</label>
<input type="radio" name="textAlign" id="toggle-textAlign-inside" /><label for="toggle-textAlign-inside">inside</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 id="checkboxListBoxSize" class="option-row">
<label for="boxSize">Box Size</label>
<input type="text" id="boxSize" class="boxSize"/>
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" /> Auto Size</label>
<label>Width:</label>
<input type="text" id="toggleCheckBoxCellWidth" value="30" />
<label>Height:</label>
<input type="text" id="toggleCheckBoxCellHeight" value="15" />
<label>Slider Margin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="2" />
<label>Slider Radius:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" value="" />
<label>Track Radius:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" value="" />
<label>Slider Color On:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="#1565c0" />
<label>Slider Color Off:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#ffffff" />
<label>Track Color On:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="#8cbae8" />
<label>Track Color Off:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#9e9e9e" />
<label>Animation Duration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</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;
}
.disabled{
opacity: 0.5;
pointer-events: none;
}
.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;
}
