アウトライン列

SpreadJSでは、ワークシートレベルでのアウトライン列がサポートされます。outlineColumnプロパティを使用して、ツリービュー内に階層データを表示できます。

データをツリービューとして表示するには、sheet.outlineColumn.options({columnIndex: index})プロパティを使用します。グループインジケータをクリックすると、展開していた列は折りたたまれ、折りたたまれていた列は展開されます。 階層データを変更するには、組み込みのincreaseCellIndentおよびdecreaseCellIndentコマンドを使用します。 increaseCellIndentコマンド:キーボードショートカット[Ctrl]+[Alt]+[ ] ]を使用して、セルのインデントおよび行グループレベルを増やします。 decreaseCellIndentコマンド:キーボードショートカット[Ctrl]+[Alt]+[ [ ]を使用して、セルのインデントおよび行グループレベルを減らします。 展開および折りたたみインジケータをカスタマイズするには、それぞれ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(); 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="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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 >アウトライン列のオプション:</label> </div> <div class="option-row"> <div class="option-row"> <input type="checkbox" id="showIndicator" checked="checked"/> <label for="showIndicator">インジケータを表示する</label> </div> <div class="option-row"> <input type="checkbox" id="showCheckBox" checked="checked"/> <label for="showCheckBox">チェックボックスを表示する</label> </div> <div class="option-row"> <input type="checkbox" id="showImage" checked="checked"/> <label for="showImage">画像を表示する</label> </div> <div class="option-row"> <input type="checkbox" id="customIndicator" checked="checked"/> <label for="customIndicator" style="width: auto">カスタムのインジケータを表示する</label> </div> <div class="option-row"> <label for="maxLevel" class="rightAlignLabel">最大レベル:</label> <input type="text" id="maxLevel" style="width: 90px;"/> </div> <div class="option-row" style="padding-top: 6px"> <input type="button" id="setMaxLevel" value="設定"/> </div> </div> <div class="option-row"> <label>カスタム画像の設定:</label> </div> <div class="option-row"> <label for="image1" class="rightAlignLabel">レベル1の画像:</label> <input type="text" id="image1"/> </div> <div class="option-row"> <label for="image2" style="margin-left: 38px;" class="rightAlignLabel">レベル2の画像:</label> <input type="text" id="image2"/> </div> <div class="option-row"> <label for="image3" style="margin-left: 38px;" class="rightAlignLabel">レベル3の画像:</label> <input type="text" id="image3"/> </div> <div class="option-row" style="padding-top: 6px"> <input type="button" id="setImages" value="設定"/> </div> <div class="option-row"> <label>カスタムインジケータの画像の設定:</label> </div> <div class="option-row"> <label for="indicator1" class="rightAlignLabel">折りたたみの画像:</label> <input type="text" id="indicator1"/> </div> <div class="option-row"> <label for="indicator2" class="rightAlignLabel">展開の画像:</label> <input type="text" id="indicator2"/> </div> <div class="option-row" style="padding-top: 6px"> <input type="button" id="setIndicators" value="設定"/> </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; }