分组列

Spread.Sheets在Worksheet上提供分组列。你可以使用分组列来展示有分层结构的数据,使数据呈现树形结构。

添加 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(); var rowCount = 37; var colCount = 10; sheet.frozenColumnCount(1); loadData(sheet); initOutlineColumn(sheet); setOutlineColumnOptions(sheet); sheet.resumePaint(); } function loadData(sheet) { var sd = data; sheet.setDataSource(sd); sheet.bindColumn(0, 'name'); sheet.bindColumn(1, 'chapter'); sheet.bindColumn(2, 'page'); sheet.setColumnCount(3); sheet.setColumnWidth(0, 340); sheet.setColumnWidth(1, 150); sheet.setColumnWidth(2, 150); for (var r = 0; r < sd.length; r++) { var level = sd[r].level; sheet.getCell(r, 0).textIndent(level); } } function initOutlineColumn(sheet) { sheet.outlineColumn.options({ columnIndex: 0, showImage: true, showCheckBox: true, images: [ '$DEMOROOT$/spread/source/images/archiverFolder.png', '$DEMOROOT$/spread/source/images/newFloder.png', '$DEMOROOT$/spread/source/images/docFile.png' ], expandIndicator: '$DEMOROOT$/spread/source/images/increaseIndicator.png', collapseIndicator: '$DEMOROOT$/spread/source/images/decreaseIndicator.png', maxLevel: 2 }); sheet.showRowOutline(false); sheet.outlineColumn.refresh(); } function setOutlineColumnOptions(sheet) { var options = sheet.outlineColumn.options(); _getElementById('indicator1').value = options.expandIndicator; _getElementById('indicator2').value = options.collapseIndicator; _getElementById('maxLevel').value = options.maxLevel; if (options.images && options.images.length) { _getElementById('image1').value = options.images[0]; _getElementById('image2').value = options.images[1]; _getElementById('image3').value = options.images[2]; } _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 = _getElementById('indicator1').value; sheet.outlineColumn.options().collapseIndicator = _getElementById('indicator2').value; 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 = [ _getElementById('image1').value, _getElementById('image2').value, _getElementById('image3').value ]; sheet.outlineColumn.refresh(); }); } 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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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.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> <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">Show default 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> <div class="option-row"> <label for="image1" class="rightAlignLabel"> Level 1 image: </label> <input type="text" id="image1"/> </div> <div class="option-row"> <label for="image2" class="rightAlignLabel"> Level 2 image: </label> <input type="text" id="image2"/> </div> <div class="option-row"> <label for="image3" class="rightAlignLabel"> Level 3 image: </label> <input type="text" 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> <div class="option-row"> <label for="indicator1" class="rightAlignLabel">Collapsed image:</label> <input type="text" id="indicator1"/> </div> <div class="option-row"> <label for="indicator2" class="rightAlignLabel">Expanded image:</label> <input type="text" 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: lavender; } .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; }