Overview

If you have a list of data that you want to group and summarize, you can create an outline of rows or columns. The rows group panel is on the left side of the row header; the columns group panel is above the column headers.

<p>To add a group in Spread.Sheets, use code similar to the following example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); sheet.rowOutlines.group(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>); sheet.columnOutlines.group(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>); </code></pre> <p>You can add a group to another group. You can create an outline of up to several levels, one for each group. Each inner level, represented by a higher number in the outline symbols, displays detailed data for the preceding outer level, represented by a lower number in the outline symbols. Use an outline to quickly display summary rows or columns, or to reveal the detail data for each group.</p> <p>If you no longer need the group, use the <strong>ungroup</strong> or <strong>ungroupRange</strong> method to remove the group. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); sheet.rowOutlines.ungroupRange(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>); sheet.columnOutlines.ungroupRange(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var sd = dataSource; if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); sheet.rowOutlines.group(1, 10); sheet.rowOutlines.group(1, 4); sheet.rowOutlines.group(6, 4); sheet.columnOutlines.group(1, 3); sheet.columnOutlines.group(1, 2); sheet.resumePaint(); };
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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" style="width: 100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }