概述
本 Demo 展示了如何在 SpreadJS 中创建自定义函数 TIMEAGO，实现计算时间间隔并以友好的中文方式显示结果。Demo 中演示了自定义函数的完整创建流程，包括函数类定义、evaluate 方法实现、函数注册以及在表格中使用。
实现思路
创建 TimeAgoFunction 类，继承自 GC.Spread.CalcEngine.Functions.Function 基类
设置函数属性：name（函数名）、minArgs（最小参数数）、maxArgs（最大参数数）
实现 evaluate 方法，处理不同类型的输入（数字、字符串、Date 对象）
在 evaluate 方法中计算时间间隔，根据时间长度返回相应的中文描述
使用 sheet.addCustomFunction() 方法注册自定义函数
在表格中设置示例数据，展示函数对不同日期的处理效果
代码解析
创建自定义函数类
这段代码定义了自定义函数类 TimeAgoFunction，设置函数名为 "TIMEAGO"，接受 1 个参数。通过原型继承 GC.Spread.CalcEngine.Functions.Function 基类，使该类具备自定义函数的能力。
实现 evaluate 方法
evaluate 方法是自定义函数的核心，负责处理输入参数并返回计算结果。该方法支持三种输入类型：数字（时间戳）、字符串（日期字符串）、Date 对象，并统一转换为时间戳进行计算。方法根据时间间隔的大小（年、月、天、小时、分钟、秒）返回相应的中文描述，同时支持过去和未来两种时间方向。
注册自定义函数
使用 sheet.addCustomFunction() 方法将自定义函数注册到工作表，注册后即可在公式中使用 TIMEAGO 函数。
在表格中使用自定义函数
这段代码设置了表格结构，并在单元格中使用 setValue 设置日期值，使用 setFormula 设置公式。Demo 展示了 TODAY() 函数、具体日期以及不同时间点的计算效果。
运行效果
表格显示三列：日期、公式文本、计算结果
第一行示例使用 TODAY() 函数，结果显示"刚刚"（当天）
第二行示例使用 2020 年的日期，结果显示"X 年前"
第三行示例使用 2021 年的日期，结果显示相应的时间间隔
所有时间间隔以友好的中文方式呈现，如"一年前"、"一个月前"、"昨天"等
API 参考
addCustomFunction 方法
fn：要添加的自定义函数对象，必须是 GC.Spread.CalcEngine.Functions.Function 的实例
setFormula 方法
row、col：单元格位置
value：公式字符串
sheetArea：可选，指定表单区域
setColumnWidth 方法
col：列索引
value：宽度值（像素）
sheetArea：可选，指定表单区域
setValue 方法
row、col：单元格位置
value：要设置的值
sheetArea：可选，指定表单区域
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
//this should be a SpreadJS Function not a custom one
function TimeAgoFunction() {
this.name = "TIMEAGO";
this.maxArgs = 1;
this.minArgs = 1;
}
TimeAgoFunction.prototype = new GC.Spread.CalcEngine.Functions.Function();
TimeAgoFunction.prototype.evaluate = function (time1) {
switch (typeof time1) {
case 'number':
break;
case 'string':
time1 = +new Date(time1);
break;
case 'object':
if (time1.constructor === Date) time1 = time1.getTime();
break;
default:
time1 = +new Date();
}
var time2 = +new Date();
if (time1 == time2) {
return "刚刚";
}
var isFuture = (time2 < time1);
var seconds = (isFuture ? time1 - time2 : time2 - time1) / 1000;
var interval = seconds / 31536000;
if (interval >= 1) {
var years = Math.floor(interval);
return isFuture ? "在 " + (years <= 1 ? "一年" : years + " 年") + "后"
: years <= 1 ? "一年前" : years + " 年前";
}
interval = seconds / 2592000;
if (interval >= 1) {
var months = Math.floor(interval);
return isFuture ? "在 " + (months <= 1 ? "一个月" : months + " 个月") + "后" : months <= 1 ? "一个月前" : months + " 个月前";
}
interval = seconds / 86400;
if (interval >= 1) {
var days = Math.floor(interval);
return isFuture ? "在 " + (days <= 1 ? "明天" : days + " 天") + "后"
: days <= 1 ? "昨天" : days + " 天前";
}
interval = seconds / 3600;
if (interval > 1) {
var hours = Math.floor(interval);
return isFuture ? "在 " + (hours <= 1 ? "一小时" : hours + " 小时") + "后"
: hours <= 1 ? "一小时前" : hours + " 小时前";
}
interval = seconds / 60;
if (interval > 1) {
var minutes = Math.floor(interval);
return isFuture ? "在 " + (minutes <= 1 ? "一分钟" : minutes + " 分钟") + "后"
: minutes <= 1 ? "一分钟前" : minutes + " 分钟前";
}
seconds = Math.floor(seconds);
return isFuture ? "在 " + (seconds <= 1 ? "一秒" : seconds + " 秒") + "后"
: seconds <= 1 ? "一秒前" : seconds + " 秒前";
};
var timeAgo = new TimeAgoFunction();
sheet.addCustomFunction(timeAgo);
// spread.fromJSON(data[0]);
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 150);
sheet.setValue(0, 0, '日期');
sheet.setValue(0, 1, '公式');
sheet.setValue(0, 2, '结果');
sheet.setFormula(1, 0, 'TODAY()');
sheet.setValue(1, 1, '=TIMEAGO(A2)');
sheet.setFormula(1, 2, 'TIMEAGO(A2)');
sheet.setValue(2, 0, new Date('2020-01-20'));
sheet.setValue(2, 1, '=TIMEAGO(A3)');
sheet.setFormula(2, 2, 'TIMEAGO(A3)');
sheet.setValue(3, 0, new Date('2021-02-10'));
sheet.setValue(3, 1, '=TIMEAGO(A4)');
sheet.setFormula(3, 2, 'TIMEAGO(A4)');
sheet.setValue(4, 0, new Date('2021-11-29 17:12:00'));
sheet.setValue(4, 1, '=TIMEAGO(A5)');
sheet.setFormula(4, 2, 'TIMEAGO(A5)');
}
<!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" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
