체크박스 셀을 만들려면 다음 예를 따르십시오.
CheckBox는 세 가지 상태의 확인란을 지원할 수 있습니다. isThreeState 메서드를 사용하여 확인란이 세 가지 상태를 지원하는지 여부를 가져오고 설정할 수 있습니다. 예:
세 가지 상태는 true, false 또는 indeterminate입니다. 모든 상태에는 자체 텍스트가 있으며 textTrue, textFalse 및 textIndeterminate 메서드를 사용하여 이러한 상태의 텍스트를 가져오고 설정할 수 있습니다. 예:
caption 메서드를 사용하여 확인란 셀의 캡션을 가져오고 설정할 수 있습니다. textAlign 메서드를 사용하여 확인란과 관련된 텍스트 정렬을 가져오고 설정합니다. 설정은 CheckBoxTextAlign 열거 값입니다.
top: 텍스트가 체크박스의 위쪽에 있습니다.
bottom: 텍스트가 체크박스의 아래쪽에 있습니다.
left: 텍스트가 체크박스의 왼쪽에 있습니다.
right: 텍스트가 체크박스의 오른쪽에 있습니다.
boxSize 메서드를 사용하여 체크박스 크기를 가져와 설정할 수 있습니다. cellType으로 숫자 또는 "auto"를 설정할 수 있습니다.
셀 스타일 "wordWrap”이 true로 설정되고 셀 너비가 텍스트에 충분하지 않다면 텍스트는 줄바꿈되어 표시됩니다.
mode 메서드를 사용하여 체크박스 모드를 가져오거나 설정할 수 있습니다. cellType에 checkbox 또는 toggle을 설정할 수 있습니다.
toggleOptions 메서드를 사용하여 체크박스의 토글 옵션을 가져오거나 설정할 수 있습니다. 매개변수 타입은 GC.Spread.Sheets.CellTypes.IToggleOptions를 참고하세요.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initCellStyle(fontSize, foreColor) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `bold ${fontSize}pt Calibri`;
style.foreColor = foreColor;
return style;
}
function propertyChange(spread, isSet) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
_getElementById("changeProperty").setAttribute("disabled", 'disabled');
return;
}
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
_getElementById("checkboxOption").style.display="none";
_getElementById("toggleOptions").style.display="block";
} else {
_getElementById("checkboxOption").style.display="block";
_getElementById("toggleOptions").style.display="none";
}
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
if (checkboxMode === 'toggle') {
_getElementById("toggleCheckBoxCellTextCaption").value = checkboxCellType.caption();
_getElementById("toggleCheckBoxCellTextTrue").value = checkboxCellType.textTrue();
_getElementById("toggleCheckBoxCellTextFalse").value = checkboxCellType.textFalse();
_getElementById("selToggleCheckBoxCellAlign").value = checkboxCellType.textAlign();
const toggleOptions = checkboxCellType.toggleOptions();
_getElementById("toggleCheckBoxCellWidth").value = toggleOptions.width;
_getElementById("toggleCheckBoxCellHeight").value = toggleOptions.height;
_getElementById("toggleCheckBoxCellSliderMargin").value = toggleOptions.sliderMargin;
_getElementById("toggleCheckBoxCellSliderRadius").value = toggleOptions.sliderRadius;
_getElementById("toggleCheckBoxCellTrackRadius").value = toggleOptions.trackRadius;
_getElementById("toggleCheckBoxCellSliderColorOn").value = toggleOptions.sliderColorOn;
_getElementById("toggleCheckBoxCellSliderColorOff").value = toggleOptions.sliderColorOff;
_getElementById("toggleCheckBoxCellTrackColorOn").value = toggleOptions.trackColorOn;
_getElementById("toggleCheckBoxCellTrackColorOff").value = toggleOptions.trackColorOff;
_getElementById("toggleCheckBoxCellAnimationDuration").value = toggleOptions.animationDuration;
_getElementById("toggleCheckBoxCellAutoSize").checked = toggleOptions.autoSize;
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!toggleOptions.autoSize);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!toggleOptions.autoSize);
} else {
if(checkboxCellType.caption()) {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="block";
_getElementById("txtCheckBoxCellTextCaption").value=checkboxCellType.caption();
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="none";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="none";
} else {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="none";
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="block";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="block";
_getElementById("txtCheckBoxCellTextTrue").value=checkboxCellType.textTrue();
_getElementById("txtCheckBoxCellTextIndeterminate").value=checkboxCellType.textIndeterminate();
_getElementById("txtCheckBoxCellTextFalse").value=checkboxCellType.textFalse();
_getElementById("ckbCheckBoxCellIsThreeState").checked=checkboxCellType.isThreeState();
_getElementById("checkboxSize").value = checkboxCellType.boxSize();
}
_getElementById("selCheckBoxCellAlign").value=checkboxCellType.textAlign();
}
} else {
if (checkboxMode === 'toggle') {
checkboxCellType.caption(_getElementById("toggleCheckBoxCellTextCaption").value);
checkboxCellType.textTrue(_getElementById("toggleCheckBoxCellTextTrue").value);
checkboxCellType.textFalse(_getElementById("toggleCheckBoxCellTextFalse").value);
checkboxCellType.textAlign(_getElementById("selToggleCheckBoxCellAlign").value - 0);
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
const autoSize = !!_getElementById("toggleCheckBoxCellAutoSize").checked;
checkboxCellType.toggleOptions({
width: autoSize ? null : (_getElementById("toggleCheckBoxCellWidth").value - 0),
height: autoSize ? null : (_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,
autoSize: autoSize,
});
} else {
if(checkboxCellType.caption()) {
checkboxCellType.caption(_getElementById("txtCheckBoxCellTextCaption").value);
} else {
checkboxCellType.textTrue(_getElementById("txtCheckBoxCellTextTrue").value);
checkboxCellType.textIndeterminate(_getElementById("txtCheckBoxCellTextIndeterminate").value);
checkboxCellType.textFalse(_getElementById("txtCheckBoxCellTextFalse").value);
checkboxCellType.isThreeState(_getElementById("ckbCheckBoxCellIsThreeState").checked);
var boxSizeValue = _getElementById("checkboxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(_getElementById("selCheckBoxCellAlign").value - 0);
}
}
}
sheet.repaint();
}
function getActualRange(range, maxRowCount, maxColCount) {
var spreadNS = GC.Spread.Sheets;
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
function initSpread(spread) {
initToggleSheet(spread);
initCheckboxSheet(spread);
_getElementById("changeProperty").addEventListener('click',function() {
propertyChange(spread, true);
});
}
function initToggleSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet1 = spread.getSheet(0);
sheet1.name("Toggle");
sheet1.defaults.colWidth = 190;
sheet1.defaults.rowHeight = 60;
sheet1.suspendPaint();
sheet1.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
sheet1.setColumnWidth(0, 110);
sheet1.setColumnWidth(1, 190);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 110);
sheet1.setColumnWidth(4, 190);
sheet1.setColumnWidth(5, 130);
sheet1.setColumnWidth(6, 130);
sheet1.setColumnWidth(7, 130);
sheet1.setColumnWidth(8, 130);
sheet1.setColumnWidth(9, 130);
for (let i = 0; i < 7; i++) {
sheet1.setRowHeight(i, 60);
}
sheet1.addSpan(0, 0, 7, 1);
sheet1.setValue(0, 0, "Toggle Mode");
sheet1.setStyle(0, 0, initCellStyle(11, "Accent 2"));
sheet1.setStyle(0, 1, initCellStyle(11, "#000"));
sheet1.setStyle(1, 1, initCellStyle(11, "#000"));
sheet1.setStyle(2, 1, initCellStyle(11, "#000"));
sheet1.setStyle(3, 1, initCellStyle(11, "#000"));
sheet1.setStyle(4, 1, initCellStyle(11, "#000"));
sheet1.setStyle(5, 1, initCellStyle(11, "#000"));
sheet1.setStyle(6, 1, initCellStyle(11, "#000"));
sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 7; i++) {
for (let j = 1; j < 8; j++) {
sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
var toggleOptions = {
width: 30,
height: 15,
trackColorOn: '#4CAF50',
trackColorOff: '#bfbfbf',
sliderColorOn: '#ffffff',
sliderColorOff: '#ffffff',
animationDuration: 200,
};
sheet1.setValue(0, 1, "Custom Size");
var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType1.mode('toggle');
toggleCustomSizeCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(0, 2, toggleCustomSizeCellType1);
var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType2.mode('toggle');
toggleCustomSizeCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
});
sheet1.setCellType(0, 3, toggleCustomSizeCellType2);
var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType3.mode('toggle');
toggleCustomSizeCellType3.toggleOptions({
...toggleOptions,
width: 60,
height: 30,
});
sheet1.setCellType(0, 4, toggleCustomSizeCellType3);
sheet1.setValue(1, 1, "Auto Size");
sheet1.comments.add(1, 1, 'After enabling the Auto Size option, the button size will be dynamically adjusted according to the text.');
var comment = sheet1.comments.get(1, 1);
comment.indicatorSize(8);
comment.indicatorColor('blue');
var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType1.mode('toggle');
toggleAutoSizeCellType1.caption("Auto");
toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType1.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 2, toggleAutoSizeCellType1);
sheet1.getStyle(1, 2).fontSize = '8pt';
var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType2.mode('toggle');
toggleAutoSizeCellType2.caption("Auto");
toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType2.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 3, toggleAutoSizeCellType2);
sheet1.getStyle(1, 3).fontSize = '12pt';
var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType3.mode('toggle');
toggleAutoSizeCellType3.caption("Auto");
toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType3.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 4, toggleAutoSizeCellType3);
sheet1.getStyle(1, 4).fontSize = '16pt';
sheet1.setValue(2, 1, "Custom Colors");
var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomColorsCellType1.mode('toggle');
toggleCustomColorsCellType1.textTrue("On");
toggleCustomColorsCellType1.textFalse("Off");
toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleCustomColorsCellType1.toggleOptions({
trackColorOn: "Accent 1 60",
trackColorOff: "Background 1 -15",
sliderColorOn: "Accent 1",
sliderColorOff: "Background 1",
animationDuration: 500,
autoSize: true
});
sheet1.setCellType(2, 2, toggleCustomColorsCellType1);
sheet1.setValue(3, 1, "Text Align");
var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType1.mode('toggle');
toggleTextAlignCellType1.caption("Top");
toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top);
toggleTextAlignCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(3, 2, toggleTextAlignCellType1);
var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType2.mode('toggle');
toggleTextAlignCellType2.caption("Bottom");
toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
toggleTextAlignCellType2.toggleOptions(toggleOptions);
sheet1.setCellType(3, 3, toggleTextAlignCellType2);
var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType3.mode('toggle');
toggleTextAlignCellType3.caption("Left");
toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
toggleTextAlignCellType3.toggleOptions(toggleOptions);
sheet1.setCellType(3, 4, toggleTextAlignCellType3);
var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType4.mode('toggle');
toggleTextAlignCellType4.caption("Right");
toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
toggleTextAlignCellType4.toggleOptions(toggleOptions);
sheet1.setCellType(3, 5, toggleTextAlignCellType4);
var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType5.mode('toggle');
toggleTextAlignCellType5.caption("Inside");
toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleTextAlignCellType5.toggleOptions({
...toggleOptions,
width: 70,
height: 20,
});
sheet1.setCellType(3, 6, toggleTextAlignCellType5);
sheet1.setValue(4, 1, "Slider Margin");
var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType1.mode('toggle');
toggleSliderMarginCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 2,
});
sheet1.setCellType(4, 2, toggleSliderMarginCellType1);
var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType2.mode('toggle');
toggleSliderMarginCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
});
sheet1.setCellType(4, 3, toggleSliderMarginCellType2);
var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType3.mode('toggle');
toggleSliderMarginCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 6,
});
sheet1.setCellType(4, 4, toggleSliderMarginCellType3);
sheet1.setValue(5, 1, "Border Radius");
var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType1.mode('toggle');
toggleBorderRadiusCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 0,
});
sheet1.setCellType(5, 2, toggleBorderRadiusCellType1);
var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType2.mode('toggle');
toggleBorderRadiusCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 12,
});
sheet1.setCellType(5, 3, toggleBorderRadiusCellType2);
var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType3.mode('toggle');
toggleBorderRadiusCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
trackRadius: 15,
sliderRadius: 0,
});
sheet1.setCellType(5, 4, toggleBorderRadiusCellType3);
var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType4.mode('toggle');
toggleBorderRadiusCellType4.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 8,
sliderRadius: 6,
});
sheet1.setCellType(5, 5, toggleBorderRadiusCellType4);
var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType5.mode('toggle');
toggleBorderRadiusCellType5.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: null,
sliderRadius: null,
});
sheet1.setCellType(5, 6, toggleBorderRadiusCellType5);
sheet1.setValue(6, 1, "Animation Duration");
var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType1.mode('toggle');
toggleAnimationDurationCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 100,
});
sheet1.setCellType(6, 2, toggleAnimationDurationCellType1);
var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType2.mode('toggle');
toggleAnimationDurationCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 300,
});
sheet1.setCellType(6, 3, toggleAnimationDurationCellType2);
var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType3.mode('toggle');
toggleAnimationDurationCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 500,
});
sheet1.setCellType(6, 4, toggleAnimationDurationCellType3);
sheet1.resumePaint();
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function(e) {
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!e.target.checked);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!e.target.checked);
});
}
function initCheckboxSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet2 = spread.getSheet(1);
sheet2.name("Checkbox");
sheet2.defaults.colWidth = 190;
sheet2.defaults.rowHeight = 60;
sheet2.suspendPaint();
sheet2.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
sheet2.setColumnWidth(0, 110);
sheet2.setColumnWidth(1, 190);
sheet2.setColumnWidth(2, 130);
for (let i = 0; i < 4; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 4, 1);
sheet2.setValue(0, 0, "Checkbox Mode");
sheet2.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet2.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet2.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet2.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet2.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet2.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
sheet2.setValue(0, 1, "caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
sheet2.setValue(1, 1, "threeState");
var threeStateCellType = new spreadNS.CellTypes.CheckBox();
threeStateCellType.isThreeState(false);
threeStateCellType.textTrue("Checked!");
threeStateCellType.textFalse("Check Me!");
sheet2.setCellType(1, 2, threeStateCellType);
sheet2.setValue(2, 1, "textAlign");
var textAlignCellType = new spreadNS.CellTypes.CheckBox();
textAlignCellType.isThreeState(false);
textAlignCellType.caption("textAlign");
textAlignCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 2, textAlignCellType);
sheet2.setValue(3, 1, "text wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
sheet2.resumePaint();
}
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">
<labe>Select the check box cell in Spread and edit its options with these text boxes.</labe>
</div>
<div id="checkboxOption">
<div class="option-row">
<label>caption:</label>
<input type="text" id="txtCheckBoxCellTextCaption" />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="txtCheckBoxCellTextTrue" value="textTrue" />
<label>textIndeterminate(for 3-state option):</label>
<input type="text" id="txtCheckBoxCellTextIndeterminate" value="textIndeterminate" />
<label>textFalse:</label>
<input type="text" id="txtCheckBoxCellTextFalse" value="textFalse" />
<label>boxSize</label>
<input type="text" id="checkboxSize" min="1">
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selCheckBoxCellAlign">
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="ckbCheckBoxCellIsThreeState" checked="checked" />
<label for="ckbCheckBoxCellIsThreeState">isThreeState</label>
</div>
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" />
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" value="textTrue" />
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" value="textFalse" />
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign">
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
<option value="4">inside</option>
</select>
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" /> autoSize</label>
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" value="40" />
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" value="20" />
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="4" />
<label>sliderRadius:</label>
<input type="number" id="toggleCheckBoxCellSliderRadius" value="12" />
<label>trackRadius:</label>
<input type="number" id="toggleCheckBoxCellTrackRadius" value="15" />
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="red" />
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#fff" />
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="red" />
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#fff" />
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="Update" />
</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;
}
.toggle-checkbox-cell-auto-size {
padding: 8px 0;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.option-row {
padding-bottom: 5px;
}
label {
padding-bottom: 4px;
display: block;
}
input, select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
