Use the sheet.outlineColumn.options({columnIndex: index}) property to make the data show as a tree view. If the group indicator is clicked, the column can be expanded or collapsed.
Use the built-in increaseCellIndent and decreaseCellIndent commands to change the hierarchical data.
Increase Cell Indent Command: Use the keyboard shortcuts 'ctrl-atl-]' to increase the cell indent and row group level.
Decrease Cell Indent Command: Use the keyboard shortcuts 'ctrl-atl-[' to decrease the cell indent and row group level.
Use the expandIndicator or collapseIndicator options to customize the expand and collapse indicator.
Use the images and showImage options to customize images that are shown at each level.
Use the showCheckBox option to customize the checkbox visibility status of each row. Checking or unchecking the checkbox in a cell will also affect all its children's checkbox statuses.
Use the maxLevel option to control the data hierarchical level. The default maxLevel is 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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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;
}
