分组列 | 功能例子 | SpreadJS JavaScript 学习指南

添加 sheet.outlineColumn.options({columnIndex: index})，让数据呈现树形结构。点击分组标记，该分组包含的行会被收起或者展开。使用内置命令 increaseCellIndent 和 decreaseCellIndent 可以改变数据的分层结构。增加单元格缩进命令: 使用键盘快捷键 'ctrl-atl-]' 增加单元格缩进和分组级别。减少单元格缩进命令: 使用键盘快捷键 'ctrl-atl-[' 减少单元格缩进和分组级别。使用 expandIndicator 或者 collapseIndicator 选项来定制展开收起的标记。使用 images 和 showImage 选项来定制不同级别的图标。使用 showCheckBox 选项来定制复选框是否可见。选中或者取消选中某个单元格中的复选框也会影响它的子单元格的复选框的选中状态。使用 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="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}