角折(ドッグイヤー)

SpreadJSは、セルの角折(ドッグイヤー)スタイルをサポートしています。

以下のようにして、セルに角折スタイルを設定できます。 角折はセルの任意のコーナーに設定できます。 position: leftTop leftBottom rightTop rightBottom デフォルト: size: 6 position: GC.Spread.Sheets.CornerPosition.leftTop color: #FF3D00
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { let sheet = spread.getSheet(0); initSpreadData(sheet); initSheet(sheet); bindEvents(spread); } function initSheet (sheet) { let style = sheet.getStyle(18, 4); style.decoration = { cornerFold: { size: 8, position: 1, color: "red" } } sheet.setStyle(18, 4, style); style = sheet.getStyle(18, 6); style.decoration = { cornerFold: { size: 10, position: 2, color: "green" } } sheet.setStyle(18, 6, style); style = sheet.getStyle(6, 10); style.decoration = { cornerFold: { size: 15, position: 4, color: "blue" } } sheet.setStyle(6, 10, style); style = sheet.getStyle(12, 10); style.decoration = { cornerFold: { size: 20, position: 8, color: "black" } } sheet.setStyle(12, 10, style); style = sheet.getStyle(18, 10); style.decoration = { cornerFold: { size: 8, position: 15, color: "black" } } sheet.setStyle(18, 10, style); } function initSpreadData(sheet) { let spreadNS = GC.Spread.Sheets; sheet.addSpan(1, 1, 1, 3); sheet.setValue(1, 1, 'Store'); sheet.addSpan(1, 4, 1, 7); sheet.setValue(1, 4, 'Goods'); sheet.addSpan(2, 1, 1, 2); sheet.setValue(2, 1, 'Area'); sheet.addSpan(2, 3, 2, 1); sheet.setValue(2, 3, 'ID'); sheet.addSpan(2, 4, 1, 2); sheet.setValue(2, 4, 'Fruits'); sheet.addSpan(2, 6, 1, 2); sheet.setValue(2, 6, 'Vegetables'); sheet.addSpan(2, 8, 1, 2); sheet.setValue(2, 8, 'Foods'); sheet.addSpan(2, 10, 2, 1); sheet.setValue(2, 10, 'Total'); sheet.setValue(3, 1, 'State'); sheet.setValue(3, 2, 'City'); sheet.setValue(3, 4, 'Grape'); sheet.setValue(3, 5, 'Apple'); sheet.setValue(3, 6, 'Potato'); sheet.setValue(3, 7, 'Tomato'); sheet.setValue(3, 8, 'SandWich'); sheet.setValue(3, 9, 'Hamburger'); sheet.addSpan(4, 1, 7, 1); sheet.addSpan(4, 2, 3, 1); sheet.addSpan(7, 2, 3, 1); sheet.addSpan(10, 2, 1, 2); sheet.setValue(10, 2, 'Sub Total:'); sheet.addSpan(11, 1, 7, 1); sheet.addSpan(11, 2, 3, 1); sheet.addSpan(14, 2, 3, 1); sheet.addSpan(17, 2, 1, 2); sheet.setValue(17, 2, 'Sub Total:'); sheet.addSpan(18, 1, 1, 3); sheet.setValue(18, 1, 'Total:'); sheet.setValue(4, 1, 'NC'); sheet.setValue(4, 2, 'Raleigh'); sheet.setValue(7, 2, 'Charlotte'); sheet.setValue(4, 3, '001'); sheet.setValue(5, 3, '002'); sheet.setValue(6, 3, '003'); sheet.setValue(7, 3, '004'); sheet.setValue(8, 3, '005'); sheet.setValue(9, 3, '006'); sheet.setValue(11, 1, 'PA'); sheet.setValue(11, 2, 'Philadelphia'); sheet.setValue(14, 2, 'Pittsburgh'); sheet.setValue(11, 3, '007'); sheet.setValue(12, 3, '008'); sheet.setValue(13, 3, '009'); sheet.setValue(14, 3, '010'); sheet.setValue(15, 3, '011'); sheet.setValue(16, 3, '012'); sheet.setFormula(10, 4, '=SUM(E5:E10)'); sheet.setFormula(10, 5, '=SUM(F5:F10)'); sheet.setFormula(10, 6, '=SUM(G5:G10)'); sheet.setFormula(10, 7, '=SUM(H5:H10)'); sheet.setFormula(10, 8, '=SUM(I5:I10)'); sheet.setFormula(10, 9, '=SUM(J5:J10)'); sheet.setFormula(17, 4, '=SUM(E12:E17)'); sheet.setFormula(17, 5, '=SUM(F12:F17)'); sheet.setFormula(17, 6, '=SUM(G12:G17)'); sheet.setFormula(17, 7, '=SUM(H12:H17)'); sheet.setFormula(17, 8, '=SUM(I12:I17)'); sheet.setFormula(17, 9, '=SUM(J12:J17)'); for (let i = 0; i < 14; i++) { sheet.setFormula(4 + i, 10, '=SUM(E' + (5 + i).toString() + ':J' + (5 + i).toString() + ')'); } sheet.setFormula(18, 4, '=E11+E18'); sheet.setFormula(18, 5, '=F11+F18'); sheet.setFormula(18, 6, '=G11+G18'); sheet.setFormula(18, 7, '=H11+H18'); sheet.setFormula(18, 8, '=I11+I18'); sheet.setFormula(18, 9, '=J11+J18'); sheet.setFormula(18, 10, '=K11+K18'); sheet.getRange(1, 1, 3, 10).backColor('#D9D9FF'); sheet.getRange(4, 1, 15, 3).backColor('#D9FFD9'); sheet.getRange(1, 1, 3, 10).hAlign(spreadNS.HorizontalAlign.center); sheet.getRange(1, 1, 18, 10).setBorder(new spreadNS.LineBorder('Black', spreadNS.LineStyle.thin), { all: true }); sheet.getRange(4, 4, 3, 6).setBorder(new spreadNS.LineBorder('Black', spreadNS.LineStyle.dotted), { inside: true }); sheet.getRange(7, 4, 3, 6).setBorder(new spreadNS.LineBorder('Black', spreadNS.LineStyle.dotted), { inside: true }); sheet .getRange(11, 4, 3, 6) .setBorder(new spreadNS.LineBorder('Black', spreadNS.LineStyle.dotted), { inside: true }); sheet .getRange(14, 4, 3, 6) .setBorder(new spreadNS.LineBorder('Black', spreadNS.LineStyle.dotted), { inside: true }); fillSampleData(sheet, new spreadNS.Range(4, 4, 6, 6)); fillSampleData(sheet, new spreadNS.Range(11, 4, 6, 6)); } function fillSampleData(sheet, range) { for (let i = 0; i < range.rowCount; i++) { for (let j = 0; j < range.colCount; j++) { sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300)); } } } function bindEvents (spread) { let sheet = spread.getSheet(0); document.getElementById("set-corner").addEventListener('click', function () { set(sheet); sheet.repaint(); }); document.getElementById("reset-corner").addEventListener('click', function () { reset(sheet); sheet.repaint(); }); spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () { reset(sheet); sheet.repaint(); }); } function reset (sheet) { let activeRow = sheet.getActiveRowIndex(); let activeCol = sheet.getActiveColumnIndex(); let style = sheet.getStyle(activeRow, activeCol); document.getElementById('leftTop').checked = false; document.getElementById('leftBottom').checked = false; document.getElementById('rightTop').checked = false; document.getElementById('rightBottom').checked = false; if (style && style.decoration && style.decoration.cornerFold) { let cornerFold = style.decoration.cornerFold; document.getElementById('size-corner').value = +cornerFold.size; document.getElementById('color-corner').value = cornerFold.color; if (cornerFold.position & 1) { document.getElementById('leftTop').checked = true; } if (cornerFold.position & 2) { document.getElementById('rightTop').checked = true; } if (cornerFold.position & 4) { document.getElementById('leftBottom').checked = true; } if (cornerFold.position & 8) { document.getElementById('rightBottom').checked = true; } } else { document.getElementById('size-corner').value = 6; document.getElementById('color-corner').value = null; } } function set (sheet) { let activeRow = sheet.getActiveRowIndex(); let activeCol = sheet.getActiveColumnIndex(); let style = sheet.getStyle(activeRow, activeCol); if (!style) { style = new GC.Spread.Sheets.Style(); } let position = 0; if (document.getElementById('leftTop').checked) { position = position | 1; } if (document.getElementById('rightTop').checked) { position = position | 2; } if (document.getElementById('leftBottom').checked) { position = position | 4; } if (document.getElementById('rightBottom').checked) { position = position | 8; } style.decoration = { cornerFold: { size: +document.getElementById('size-corner').value, position: position, color: document.getElementById('color-corner').value } } sheet.setStyle(activeRow, activeCol, style); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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="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"> <p>セルを選択し、角折スタイルを設定します。</p> <div class="corner-pro"> <label for="size-corner">サイズ:</label><input type="number" id="size-corner" class="corner-input" placeholder="corner-size" value="6"> </div> <div class="corner-pro"> <label for="color-corner">色:</label><input type="text" id="color-corner" class="corner-input" placeholder="corner-color" value="red"> </div> <div class="corner-pro"> <label for="position-corner">左上に表示:</label><input type="checkbox" class="corner-input" id="leftTop"> </div> <div class="corner-pro"> <label for="position-corner">右上に表示:</label><input type="checkbox" class="corner-input" id="rightTop"> </div> <div class="corner-pro"> <label for="position-corner">左下に表示:</label><input type="checkbox" class="corner-input" id="leftBottom"> </div> <div class="corner-pro"> <label for="position-corner">右下に表示:</label><input type="checkbox" class="corner-input" id="rightBottom"> </div> <div class="corner-pro"> <button id="set-corner" class="corner-btn">設定</button> <button id="reset-corner" class="corner-btn">リセット</button> </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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } label { display: inline-block; width: 135px; } .corner-pro { width: 100%; height: 30px; font-size: 13px; } #size-corner, #color-corner { display: inline-block; width: 100px; } .corner-btn { display: inline-block; width: 100px; height: 30px; margin-left: 20px; }