Custom Functions

In SpreadJS, you can create your own function and add it to sheet.

You can create your own function by inheriting the GC.Spread.CalcEngine.Functions.Function, as shown in the following code: After you have added your own function, if you want to remove it or clear all custom functions, use the removeCustomFunction or clearCustomFunctions method.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setValue(1, 1, 'Press \'Add a Custom Function\' button'); sheet.setColumnWidth(1, 225); sheet.setColumnWidth(2, 100); function FactorialFunction() { this.name = "FACTORIAL"; this.maxArgs = 1; this.minArgs = 1; } FactorialFunction.prototype = new GC.Spread.CalcEngine.Functions.Function(); FactorialFunction.prototype.evaluate = function (arg) { var result = 1; if (arguments.length === 1 && !isNaN(parseInt(arg))) { for (var i = 1; i <= arg; i++) { result = i * result; } return result; } return "#VALUE!"; }; var factorial = new FactorialFunction(); document.getElementById("addCustomFunction").addEventListener('click',function() { sheet.setValue(3, 1, 'Formula'); sheet.setValue(3, 2, '=factorial(5)'); sheet.setValue(4, 1, 'Result'); sheet.addCustomFunction(factorial); sheet.setFormula(4, 2, "=factorial(5)"); }); document.getElementById("removeCustomFunction").addEventListener('click',function() { sheet.removeCustomFunction("FACTORIAL"); sheet.recalcAll(true); }); };
<!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/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"> <input type="button" value="Add a Custom Function(factorial)" id="addCustomFunction" /> <input type="button" value="Remove the Custom Function(factorial)" id="removeCustomFunction"/> </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; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .option-row { margin-bottom: 12px; } input[type=button] { padding: 4px 6px; margin-bottom: 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }