罫線とグリッド線

Spreadでは、セルに罫線および斜め罫線を設定できます。グリッド線を追加または削除することもできます。

<p>Spreadは、細線、点線、二重線など、シートの罫線やグリッド線をカスタマイズするための多数の線種を備えています。たとえば次のコードは、指定のセル範囲の左および右境界線を点線に変更します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> lineStyle = GC.Spread.Sheets.LineStyle.dotted; <span class="hljs-keyword">var</span> lineBorder = <span class="hljs-keyword">new</span> GC.Spread.Sheets.LineBorder(<span class="hljs-string">'red'</span>, lineStyle); <span class="hljs-keyword">var</span> sheetArea = GC.Spread.Sheets.SheetArea.viewport; sheet.getRange(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>).setBorder(lineBorder, { <span class="hljs-attr">left</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">right</span>: <span class="hljs-literal">true</span>}, sheetArea); </code></pre> <p>Spreadには、2種類の斜め罫線が用意されています。右下がりの斜め罫線、右上がりの斜め罫線です。</p> <ul> <li><strong>diagonalDown</strong></li> <li><strong>diagonalUp</strong></li> </ul> <p>次のサンプルコードは、セルに斜め罫線を設定します。</p> <pre><code class="hljs js language-js"> sheet.getCell(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>).diagonalDown(<span class="hljs-keyword">new</span> GC.Spread.Sheets.LineBorder(<span class="hljs-string">'blue'</span>,GC.Spread.Sheets.LineStyle.double)); sheet.getCell(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>).diagonalUp(<span class="hljs-keyword">new</span> GC.Spread.Sheets.LineBorder(<span class="hljs-string">'blue'</span>,GC.Spread.Sheets.LineStyle.double)); </code></pre> <p>グリッド線を追加または削除し、グリッド線の色を設定するには、次のコードを使用します。</p> <pre><code class="hljs js language-js"> sheet.options.gridline = {<span class="hljs-attr">color</span>:<span class="hljs-string">"#FF2235"</span>, <span class="hljs-attr">showVerticalGridline</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">showHorizontalGridline</span>: <span class="hljs-literal">true</span>}; </code></pre> <p>SheetAreaOffsetオプションを設定すると、シートのレンダリング領域全体を左上から少しオフセットして表示できます。これにより、罫線や選択領域を示す線を表示するためのスペースを十分に確保できます。</p> <pre><code class="hljs js language-js"> sheet.options.sheetAreaOffset= {<span class="hljs-attr">left</span> : <span class="hljs-number">2</span>, <span class="hljs-attr">top</span> : <span class="hljs-number">2</span>}; </code></pre> <p>sheetAreaOffsetのデフォルト値は、{lleft : 0, top : 0}です。</p>
var spreadNS = GC.Spread.Sheets; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; var lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin); var range = sheet.getRange(7, 1, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double)); range = sheet.getRange(7, 4, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium)); range = sheet.getRange(7, 7, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed)); range = sheet.getRange(7, 10, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); range = sheet.getRange(11, 1, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true }); range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin)); range = sheet.getRange(11, 4, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true }); range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); range = sheet.getRange(11, 7, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true }); range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double)); range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick)); range = sheet.getRange(11, 10, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true }); range = sheet.getRange(17, 1, 2, 5); range.setBorder(lineBorder1, { outline: true }); range = sheet.getRange(17, 1, 2, 2); range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true }); range = sheet.getRange(17, 4, 2, 2); range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true }); range = sheet.getRange(16, 7, 7, 4); range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), { left: true, bottom: true }); range = sheet.getRange(15, 8, 7, 4); range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), { top: true, right: true }); range = sheet.getRange(16, 8, 6, 3); range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), { left: true, bottom: true }); range = sheet.getRange(16, 8, 6, 3); range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), { top: true, right: true }); range = sheet.getRange(16, 9, 5, 2); range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), { left: true, bottom: true }); range = sheet.getRange(17, 8, 5, 2); range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), { top: true, right: true }); sheet.addSpan(17, 9, 2, 1); range = sheet.getRange(17, 9, 2, 1); range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true }); addTableInfo(sheet); initSheetAreaSheet(spread.getSheet(1)); _getElementById('gridline_show').addEventListener('change', function() { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.options.gridline.showHorizontalGridline = this.checked; sheet.options.gridline.showVerticalGridline = this.checked; sheet.resumePaint(); }); spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) { if (args.oldSheet === sheet) { _forSheetAreaStatus('block'); _getElementByClassName('forBorder')[0].setAttribute('style', 'display:none'); } else { _forSheetAreaStatus('none'); _getElementByClassName('forBorder')[0].setAttribute('style', 'display:block'); } }); }; function addTableInfo(sheet) { sheet.setArray(1, 3, [ [ 'sex', 'Phone Number', 'Address' ], [ 'woman', '021-432668', 'Chester Road' ], [ 'man', '021-432238', 'Gertt Road' ], [ 'man', '021-432533', 'Jnyliner Road' ], [ 'man', '021-432125', 'Approach Road' ] ]); var style = new GC.Spread.Sheets.Style(); style.wordWrap = true; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setStyle(1, 2, style, 3); sheet.setText(1, 2, ' info name', spreadNS.SheetArea.viewport); cell = sheet.getCell(1, 2); cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport); sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport); sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport); sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport); sheet.setRowHeight(1, 30); sheet.setColumnWidth(4, 120); sheet.setColumnWidth(5, 120); range = sheet.getRange(1, 2, 5, 4); range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true }); sheet.resumePaint(); } function initSheetAreaSheet(sheet) { sheet.suspendPaint(); sheet.name('SheetAreaOffset'); var data = sheetAreaJSON; sheet.fromJSON(data); sheet.options.colHeaderVisible = false; sheet.options.rowHeaderVisible = false; sheet.options.sheetAreaOffset = { left: 2, top: 2 }; var range = sheet.getRange(0, 0, 3, 10); range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), { left: true, bottom: true, top: true, right: true }); sheet.resumePaint(); _getElementById('headerVisible').addEventListener('change', function() { sheet.options.rowHeaderVisible = this.checked; sheet.options.colHeaderVisible = this.checked; }); _getElementById('setOffset').addEventListener('click', function() { var left = _getElementById('offsetLeft').value, top = _getElementById('offsetTop').value; sheet.options.sheetAreaOffset = { left: parseInt(left, 10), top: parseInt(top, 10) }; }); _forSheetAreaStatus('none'); } function _getElementById(id) { return document.getElementById(id); } function _getElementByClassName(className) { return document.getElementsByClassName(className); } function _forSheetAreaStatus(status) { var forSheetAreas = _getElementByClassName('forSheetArea'); for (var i = 0; i < forSheetAreas.length; i++) { forSheetAreas[i].setAttribute('style', 'display:' + status); } }
<!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/sheetAreaData.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 forBorder"> <input type="checkbox" id="gridline_show"/> <label for="gridline_show" title="Set whether to display grid line">グリッド線を表示する</label> </div> <div class="option-row forSheetArea"> <input type="checkbox" id="headerVisible"><label for="headerVisible">HeaderVisible</label> </div> <div class="option-row forSheetArea"> <label> left: <input type="number" id="offsetLeft" value="2" /></label> </div> <div class="option-row forSheetArea"> <label> top: <input type="number" id="offsetTop" value="2" /></label> </div> <div class="option-row forSheetArea"> <input type="button" id="setOffset" value="Set Sheet Area Offset"> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 300px); height: calc(100% - 20px); overflow: hidden; float: left; margin: 10px; } .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; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }