新建一个类型并且从 GC.Spread.CalcEngine.Functions.AsyncFunction 派生。
当结果不能立即计算完成时可以使用 defaultValue 来暂时代替计算结果。
使用 evaluateAsync 方法来进行计算, 并且在异步计算完毕后使用 context.setAsyncResult 方法来讲计算结果通知 SpreadJS。
AsyncFunctionEvaluateMode 代表了异步函数的计算模式, 总共有如下3种计算模式:
0 表示函数在单元格需要计算是进行重算. 例如: B1='MyAsync1(A1) + MyAsync2(A2)', 当 A1 的值改变时, B1中的公式就会重新计算, 因此 'MyAsync1(A1)' 和 'MyAsync2(A2)' 都会进行重算。
1 表示函数只需要计算一次。
2 表示‘FRESH’函数中的公式会随着时间的间隔去进行计算。
SpreadJS 提供了 refresh 方法。
第一个参数可以使任意公式。
计算模式应该是GC.Spread.CalcEngine.Functions.AsyncFunctionEvaluateMode枚举类型中的一个。
interval只有在计算模式是2的时候才会起作用。
一般来说，REFRESH 函数是最外层的函数。
当我们把异步函数放在 REFRESH 函数中时, 异步函数将会使用 REFRESH 的参数, 而自己的那些参数将不再起作用。
使用 addCustomFunction 方法来添加并定义异步函数，然后这个自定义函数就能够在 setFormula 方法中使用或者直接通过键盘输入了。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
var asyncSum = function () {
};
asyncSum.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("ASUM", 1, 255);
asyncSum.prototype.defaultValue = function () {
return "Loading...";
};
asyncSum.prototype.evaluateAsync = function (context) {
// use setTimeout to simulate server side evaluation
// in read world it maybe an ajax post to server for evaluation
var args = arguments;
setTimeout(function () {
var result = 0;
for (var i = 1; i < args.length; i++) {
result += args[i];
}
result *= 2;
context.setAsyncResult(result);
}, 2000);
};
var GetNumberFromServer = function () {
};
GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETNUMBERFROMSERVER", 1, 2);
GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
setTimeout(function () {
var value = Math.random() + 1;
context.setAsyncResult(value);
}, 500);
};
GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETNUMBERFROMSERVER", new GetNumberFromServer());
var GetTimeFromServer = function () {
};
GetTimeFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETTIMEFROMSERVER");
GetTimeFromServer.prototype.evaluate = function (context) {
setTimeout(function () {
var date = new Date();
context.setAsyncResult(date);
}, 500);
};
GetTimeFromServer.prototype.evaluateMode = function () {
return 2;
};
GetTimeFromServer.prototype.interval = function () {
return 1000;
};
GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETTIMEFROMSERVER", new GetTimeFromServer());
var sheet = spread.sheets[0];
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
sheet.setArray(0, 0, [[5, 15]]);
sheet.addCustomFunction(new asyncSum());
sheet.setText(1, 1, 'ASUM(A1,B1)');
sheet.setText(2, 1, 'SUM(A1,B1)');
sheet.setFormula(1, 2, "ASUM(A1,B1)");
sheet.getCell(1, 2).foreColor("green");
sheet.setFormula(2, 2, "SUM(A1,B1)");
sheet.setValue(4, 0, "Edit the formula of C2 or referenced cell' value to see how async function works.");
sheet.setValue(8, 0, 'CHANGEVALUE');
sheet.setValue(8, 1, 'FORMULA');
sheet.setValue(8, 2, 'RESULT');
sheet.setValue(8, 3, 'COMMENTS');
sheet.setValue(9, 3, 'On A10 changed');
sheet.setValue(10, 3, 'On A10 changed');
sheet.setValue(11, 3, 'Evaluate once');
sheet.setValue(12, 3, 'Every 2 seconds');
sheet.setValue(9, 0, 1);
sheet.setValue(9, 1, '=GetNumberFromServer(A10)');
sheet.setValue(10, 1, '=Refresh(GetNumberFromServer(A10), 0)');
sheet.setValue(11, 1, '=Refresh(GetNumberFromServer(A10), 1)');
sheet.setValue(12, 1, '=Refresh(GetNumberFromServer(A10), 2, 2000)');
sheet.setFormula(9, 2, '=GetNumberFromServer(A10)');
sheet.setFormula(10, 2, '=Refresh(GetNumberFromServer(A10), 0)');
sheet.setFormula(11, 2, '=Refresh(GetNumberFromServer(A10), 1)');
sheet.setFormula(12, 2, '=Refresh(GetNumberFromServer(A10), 2, 2000)');
sheet.getCell(12, 2).foreColor("green");
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 300);
sheet.setColumnWidth(2, 200);
sheet.setColumnWidth(3, 200);
sheet.setValue(15, 1, "=Refresh(now(), 2, 1000)");
sheet.setValue(15, 3, "Every 1 second");
sheet.setFormula(15, 2, "=Refresh(now(), 2, 1000)");
sheet.getCell(15, 2).foreColor("green");
sheet.setValue(18, 1, "=GetTimeFromServer()");
sheet.setValue(18, 3, "Every 1 second");
sheet.setFormula(18, 2, "=GetTimeFromServer()");
sheet.getCell(18, 2).foreColor("green");
sheet.getCell(18, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.right);
sheet.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
