수식

SpreadJS는 지정된 셀에서의 수식 설정을 지원합니다. 사용자 정의 이름은 해당 수식에 추가할 수도 있으므로 통합 문서의 다른 위치에서 사용할 수 있습니다. 수식은 런타임에서 스프레드시트에 수동으로 설정하거나 시트의 setFormula 함수를 통해 JavaScript 코드로 생성할 수 있습니다.

다음과 유사한 코드를 사용하여 셀 또는 셀 범위에 대한 수식을 설정합니다. 사용자는 수식 관련 참조 자동 오프셋으로 셀의 범위를 설정할 수 있습니다. 다음과 유사한 코드를 사용하여 범위에 대한 배열 수식을 설정합니다. 다음 코드를 사용하여 지정된 셀에 수식이 있는지 여부를 확인할 수 있습니다. 수식이 길거나 자주 사용되는 경우 사용자 정의 서식 이름을 추가하여 수식을 더 편리하게 사용할 수 있습니다. 다음과 같이 사용자 정의 이름 모음에서 사용자 정의 이름을 제거할 수 있습니다. 또한 다음 메서드를 사용하여 모든 사용자 정의 이름을 제거할 수 있습니다. ShowFormulas로 시트를 설정하여 값이 아닌 수식 내용을 표시할 수 있습니다. ShowFormulas를 사용하여 또 다른 응용 프로그램에 수식 문자열을 복사하거나 수식을 인쇄할 수 있습니다.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss")); var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setArray(0, 0, [ ["Product", "Item Price", "Quantity", "Sales"], ['Kraft Real Mayo', 5.71, 1], ['Smartfood Popcorn', 2.5, 4], ['Teddy Grahams Crackers', 35, 5], ['Parmesan Cheese', 14.89, 9], ['Planter Deluxe Whole Cashew', 8.52, 3], ['Total'] ]); sheet.setColumnWidth(0, 190); sheet.setColumnWidth(1, 80); sheet.setColumnWidth(2, 80); sheet.getRange(1, 3, 5, 1).formula("B2*C2", true); sheet.addCustomName('customName1', '=$B$2:$B$6', 0, 0); sheet.addCustomName('customName2', '=$C$2:$C$6', 0, 0); sheet.setFormula(6, 1, "=SUM(customName1)"); sheet.setFormula(6, 2, "=SUM(customName2)"); sheet.getRange(6, 0, 1, 4).foreColor('red'); sheet.setFormula(6, 3, "B7*C7"); var style = sheet.getStyle(4, 7) || new GC.Spread.Sheets.Style();; style.cellButtons= [{ useButtonStyle: true, caption: "Show Formulas", width: 120, command: function() { sheet.options.showFormulas = !sheet.options.showFormulas; if (sheet.options.showFormulas) { style.cellButtons[0].imageType = GC.Spread.Sheets.ButtonImageType.ok; } else { style.cellButtons[0].imageType = GC.Spread.Sheets.ButtonImageType.none; } sheet.setStyle(4, 7, style); }, }]; sheet.setStyle(4, 7, style); sheet.setColumnWidth(7, 122); sheet.resumePaint(); _getElementById('btnSetFormula').addEventListener('click', function() { var sheet = spread.getActiveSheet(); if (_getElementById("formula").value) { var formula = _getElementById("formula").value; if (_getElementById("rowIndex").value && _getElementById("columnIndex").value) { var rowIndex = parseInt(_getElementById("rowIndex").value); var columnIndex = parseInt(_getElementById("columnIndex").value); if (_getElementById("rowCount").value && _getElementById("columnCount").value) { var rowCount = Math.max(parseInt(_getElementById("rowCount").value), 1); var columnCount = Math.max(parseInt(_getElementById("columnCount").value), 1); sheet.setArrayFormula(rowIndex, columnIndex, rowCount, columnCount, formula); } else { sheet.setFormula(rowIndex, columnIndex, formula); } } } }); }; function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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 style="font-size:16px;padding:1px 0px" >Setting a formula via code</p> <p style="padding:2px 10px">Specify the row and column index for the formula cell. Set the row count and column count to specify the number of rows and columns to add the formula to. Add the formula to the Formula box and then click SetFormula to apply the formula.</p> <div class="option-row"> <label for="rowIndex">Row Index:</label> <input type="text" id="rowIndex"/> </div> <div class="option-row"> <label for="columnIndex">Column Index:</label> <input type="text" id="columnIndex"/> </div> <div class="option-row"> <label for="rowCount">Row Count:</label> <input type="text" id="rowCount"/> </div> <div class="option-row"> <label for="columnCount">Column Count:</label> <input type="text" id="columnCount"/> </div> <div class="option-row"> <label for="formula">Formula:</label> <input type="text" id="formula" value="=SUM(B2,B6)"/> <input type="button" id="btnSetFormula" value="SetFormula" /> </div> </div> </div> </body> </html>
input[type="text"] { width: 200px; margin-right: 20px; } label { display: inline-block; width: 110px; } .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 { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; width:216px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }