限制单元格只能输入数字
问题：如何限制单元格只可以输入数字？
背景：
在某些情况下，需要对某些单元格限定输入的值的类型，如只能输入数字等。
解决方案：
在这种情况下，可以使用自定义的公式验证器来实现，可以参考以下的Demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.1.4.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript"
src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.1.4.min.js"></script>
<script type="text/javascript"
src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.16.1.4.min.js"></script>
<style>
#ss {
height: 600px;
}
</style>
</head>
<body>
<div style="width: 100%">
<div id="ss"></div>
</div>
<script>
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
spread.options.highlightInvalidData = true;
function RegExFunction() {
this.name = "REGEX";
this.maxArgs = 2;
this.minArgs = 2;
this.typeName = "RegExFunction";
}
RegExFunction.prototype = new GC.Spread.CalcEngine.Functions.Function();
RegExFunction.prototype.isContextSensitive = function () {
return true;
}
RegExFunction.prototype.evaluate = function () {
var context = arguments[0], value = context.source.getValue(context.row, context.column);
var reg = new RegExp(arguments[1]);
if (value) {
return reg.test(value.toString());
}
return false;
}
sheet.addCustomFunction(new RegExFunction());
sheet.setValue(0, 0, "自定义公式数据验证");
sheet.setValue(0, 1, "只能输入数字");
sheet.setColumnWidth(0, 150);
sheet.setColumnWidth(1, 100);
var dv8 = GC.Spread.Sheets.DataValidation.createFormulaValidator('REGEX("(^[\-0-9][0-9]*(.[0-9]+)?)$")');
sheet.getCell(0, 2).backColor("yellow").validator(dv8);
});
</script>
</body>
</html>但是这种方式并不能强制用户输入数字，只能显示出一个错误提示，如果想要强制数字输入应该怎么办呢？
可以通过监听EditEnding事件，判断输入内容是否为数字，如果不是数字则执行args.cancel = true来阻止编辑生效。Demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.1.4.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript"
src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.1.4.min.js"></script>
<script type="text/javascript"
src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.16.1.4.min.js"></script>
<style>
#ss {
height: 600px;
}
</style>
</head>
<body>
<div style="width: 100%">
<div id="ss"></div>
</div>
<script>
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.setValue(0, 1, "只能输入数字");
sheet.setColumnWidth(0, 150);
sheet.setColumnWidth(1, 100);
sheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) {
var text = args.editingText;
console.log(args)
if (!Number(text)) {
sheet.clear(args.row, args.col, 1, 1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
}
});
});
</script>
</body>
</html>使用这种方式可以使输入的值强行为数字，否则的话就无法使输入的数据生效。
此外， 还可以使用NumberValidator来实现，具体可以参考这个链接中的内容：自定义数据验证
作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26