指定範囲の自動マージ

SpreadJSは指定範囲の自動マージをサポートしています。行と列の両方の隣接セルは、同一のテキストが含まれており、結合セルがない場合に自動的にマージされます。

<p>行と列の両方に<strong>autoMerge</strong>メソッドを使用することで自動マージを設定できます。</p> <p>次のコードは、列方向に優先的に自動マージを適用し、次に行方向に自動マージを適用します。</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(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow); </code></pre> <p>次のコードは、行方向に優先してから列方向に自動マージを適用します</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(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.rowColumn); </code></pre> <p>次のコードは、列方向に自動マージを適用します。</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(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column); </code></pre> <p>次のコードは、行方向に自動マージを適用します。</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(); <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var switchAutoMergeDirection = _getElementById("switchAutoMergeDirection"); switchAutoMergeDirection.addEventListener("change", function (event) { var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); //remove old auto merge range sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none); //add new auto merge range sheet.autoMerge(range, parseInt(event.target.value)); sheet.resumePaint(); }); spread.suspendPaint(); spread.options.showVerticalScrollbar = false; spread.options.showHorizontalScrollbar = false; spread.options.tabStripVisible = false; //init sheet var sheet = spread.getActiveSheet(); sheet.defaults.rowHeight = 40; sheet.defaults.colWidth = 100; sheet.defaults.colHeaderRowHeight = 40; sheet.defaults.rowHeaderColWidth = 60; sheet.setRowCount(5); sheet.setColumnCount(7); var defaultStyle = sheet.getDefaultStyle(); defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; sheet.setDefaultStyle(defaultStyle); ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].forEach(function (value, index) { sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader); }); ["12:00", "13:00", "14:00", "15:00", "16:00"].forEach(function (value, index) { sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader); }); sheet.setArray(0, 0, [ ["Walker", "Morning Show", "Morning Show", "Sport", "Weather", "N/A", "N/A"], ["Today Show", "Today Show", "Sesame Street", "Football", "Market Watch", "N/A", "N/A"], ["Today Show", "Today Show", "Kid Zone", "Football", "Soap Opera", "N/A", "N/A"], ["News", "News", "News", "News", "News", "N/A", "N/A"], ["News", "News", "News", "News", "News", "N/A", "N/A"] ]); //apply auto merge var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow); spread.resumePaint(); } 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/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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> 自動マージの方向 <select id="switchAutoMergeDirection"> <option value="0">None</option> <option value="1">column</option> <option value="2">row</option> <option value="3" selected="selected">columnRow</option> <option value="4">rowColumn</option> </select> </div> </div> </div> </body> </html>
.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; } #switchAutoMergeDirection { margin: 10px 0px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }