아웃라인 열 | 기능별 학습

sheet.outlineColumn.options({columnIndex: index}) 속성을 사용하여 데이터를 트리 보기로 표시합니다. 그룹 표시기를 클릭하면 열을 확장하거나 축소할 수 있습니다. 기본 제공 increaseCellIndent 및 decreaseCellIndent 명령을 사용하여 계층 데이터를 변경합니다. Increase Cell Indent Command: 셀 들여쓰기 및 행 그룹 수준을 늘리려면 키보드 바로 가기 'ctrl-atl-]'를 사용합니다. Decrease Cell Indent Command: 셀 들여쓰기 및 행 그룹 수준을 줄이려면 키보드 바로 가기 'ctrl-atl-['를 사용합니다. expandIndicator 또는 collapseIndicator 옵션을 사용하여 확장 및 축소 표시기를 사용자 정의합니다. 표시기를 확장 및 축소하려면 expandIndicator 또는 collapseIndicator 옵션을 사용합니다. images 및 showImage 옵션을 사용하여 각 수준에 표시된 이미지를 사용자 정의할 수 있습니다. showCheckBox 옵션을 사용하여 각 행의 확인란 표시 여부 상태를 사용자 정의합니다. 셀의 확인란을 선택하거나 해제하면 해당 하위 확인란의 상태도 모두 영향을 받습니다. maxLevel 옵션을 사용하여 데이터 계층 수준을 제어할 수 있습니다. 기본 maxLevel은 10입니다.

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
loadData(sheet);
initOutlineColumn(sheet);
setOutlineColumnOptions(sheet);
sheet.getRange(0,3,25,3).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.resumePaint();
}
function loadData(sheet) {
var sd = data;
sheet.setDataSource(sd);
sheet.setColumnCount(6);
sheet.setColumnWidth(0, 150);
sheet.setColumnWidth(1, 350);
sheet.setColumnWidth(2, 150);
sheet.setColumnWidth(3, 150);
sheet.setColumnWidth(4, 150);
sheet.setColumnWidth(5, 150);
for (var r = 0; r < sd.length; r++) {
var level = sd[r].level;
if(level==0)
{
sheet.getRange(r,0,1,7).backColor("#CCCCCC");
}
else if(level==1)
{
sheet.getRange(r,0,1,7).backColor("#EEEEEE");
}
sheet.getCell(r, 0).textIndent(level);
}
}
const defaultImages = ['$DEMOROOT$/spread/source/images/task-1.png', '$DEMOROOT$/spread/source/images/task-2.png', '$DEMOROOT$/spread/source/images/task-3.png'];
const defaultExpandIndicator = '$DEMOROOT$/spread/source/images/increaseIndicator.png';
const defaultCollapseIndicator = '$DEMOROOT$/spread/source/images/decreaseIndicator.png';
function initOutlineColumn(sheet) {
sheet.outlineColumn.options({
columnIndex: 0,
showImage: true,
showCheckBox: true,
images: defaultImages,
expandIndicator: defaultExpandIndicator,
collapseIndicator: defaultCollapseIndicator,
maxLevel: 2
});
sheet.showRowOutline(false);
sheet.outlineColumn.refresh();
}
function setOutlineColumnOptions(sheet) {
var picture1Url = defaultImages[0];
var picture2Url = defaultImages[1];
var picture3Url = defaultImages[2];
var indicator1Url = defaultExpandIndicator;
var indicator2Url = defaultCollapseIndicator;
var options = sheet.outlineColumn.options();
_getElementById('maxLevel').value = options.maxLevel;
_getElementById('showIndicator').addEventListener('change', function() {
sheet.outlineColumn.options().showIndicator = _getElementById('showIndicator').checked;
sheet.outlineColumn.refresh();
});
_getElementById('showCheckBox').addEventListener('change', function() {
sheet.outlineColumn.options().showCheckBox = _getElementById('showCheckBox').checked;
sheet.outlineColumn.refresh();
});
_getElementById('showImage').addEventListener('change', function() {
sheet.outlineColumn.options().showImage = _getElementById('showImage').checked;
sheet.outlineColumn.refresh();
});
_getElementById('customIndicator').addEventListener('change', function() {
if (!_getElementById('customIndicator').checked) {
_getElementById('setIndicators').setAttribute('disabled', true);
_getElementById('indicator1').setAttribute('disabled', true);
_getElementById('indicator2').setAttribute('disabled', true);
sheet.outlineColumn.options().expandIndicator = null;
sheet.outlineColumn.options().collapseIndicator = null;
sheet.outlineColumn.refresh();
} else {
_getElementById('setIndicators').removeAttribute('disabled');
_getElementById('indicator1').removeAttribute('disabled');
_getElementById('indicator2').removeAttribute('disabled');
_getElementById('setIndicators').addEventListener('click', _handel());
}
});
_getElementById('setIndicators').addEventListener('click', _handel);
function _handel(){
sheet.outlineColumn.options().expandIndicator =indicator1Url;
sheet.outlineColumn.options().collapseIndicator = indicator2Url;
sheet.outlineColumn.refresh();
}
_getElementById('setMaxLevel').addEventListener('click', function() {
sheet.outlineColumn.options().maxLevel = parseInt(_getElementById('maxLevel').value);
sheet.outlineColumn.refresh();
});
_getElementById('setImages').addEventListener('click', function() {
sheet.outlineColumn.options().images = [
picture1Url,
picture2Url,
picture3Url
];
sheet.outlineColumn.refresh();
});
_getElementById('image1').addEventListener('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
picture1Url = this.result;
};
});
_getElementById('image2').addEventListener('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
picture2Url = this.result;
};
});
_getElementById('image3').addEventListener('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
picture3Url = this.result;
};
});
_getElementById('indicator1').addEventListener('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
indicator1Url = this.result;
};
});
_getElementById('indicator2').addEventListener('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert('The file must be an image!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
indicator2Url = this.result;
};
});
}
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="$DEMOROOT$/spread/source/data/outlineColumn-wbs.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">
<label >OutlineColumn Options:</label>
</div>
<hr>
<div class="option-row">
<div class="option-row">
<input type="checkbox" id="showIndicator" checked="checked"/>
<label for="showIndicator">Show Indicator</label>
</div>
<div class="option-row">
<input type="checkbox" id="showCheckBox" checked="checked"/>
<label for="showCheckBox">Show CheckBox</label>
</div>
<div class="option-row">
<input type="checkbox" id="showImage" checked="checked"/>
<label for="showImage">Show Image</label>
</div>
<div class="option-row">
<input type="checkbox" id="customIndicator" checked="checked"/>
<label for="customIndicator" style="width: auto">Allow Custom Indicator</label>
</div>
<div class="option-row">
<label for="maxLevel" class="rightAlignLabel">Max level:</label>
<input type="text" id="maxLevel" style="width: 90px;"/>
</div>
<div class="option-row" style="padding-top: 6px">
<input type="button" id="setMaxLevel" value="Set"/>
</div>
</div>
<div class="option-row">
<label>Custom Image Settings:</label>
</div>
<hr>
<div class="option-row">
<label for="image1" class="rightAlignLabel"> Level 1 image: </label>
<input type="file" name="img1" id="image1" />
</div>
<div class="option-row">
<label for="image2" class="rightAlignLabel"> Level 2 image: </label>
<input type="file" name="img2" id="image2" />
</div>
<div class="option-row">
<label for="image3" class="rightAlignLabel"> Level 3 image: </label>
<input type="file" name="img3" id="image3" />
</div>
<div class="option-row" style="padding-top: 6px">
<input type="button" id="setImages" value="Set"/>
</div>
<div class="option-row">
<label>Custom Indicator Image Settings:</label>
</div>
<hr>
<div class="option-row">
<label for="indicator1" class="rightAlignLabel">Expanded image:</label>
<input type="file" name="in1" id="indicator1" />
</div>
<div class="option-row">
<label for="indicator2" class="rightAlignLabel">Collapsed image:</label>
<input type="file" name="in2" id="indicator2" />
</div>
<div class="option-row" style="padding-top: 6px">
<input type="button" id="setIndicators" value="Set"/>
</div>
</div>
</div></body>
</html>

.colorLabel {
background-color: #F4F8EB;
}
.rightAlignLabel {
width: 120px;
text-align: right;
margin-right: 8px;
}
input[type="text"] {
width: 190px;
}
.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;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
width: 190px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}