SpreadJS 自定义单元格实现只允许输入数字的功能

收藏

本帖最后由 lin123 于 2018-3-30 11:56 编辑

看过以往的帖子，对照着弄怎么单元格就无法选定？

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook($("#sheet")[0], { sheetCount : 1 });
var sheet = spread.getActiveSheet();
//非数字禁止输入
function NumberCellType() {
}
NumberCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
NumberCellType.prototype.paint = function(ctx, value, x, y, w, h,style, options) {
if (value) {
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, options ]);
}
};
NumberCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
if (editorContext) {
$(editorContext).width(cellRect.width);
$(editorContext).height(100);
return { height : 100 };
}
};
NumberCellType.prototype.createEditorElement = function(context) {
var editor = GC.Spread.Sheets.CellTypes.Base.createEditorElement.call(this, context);
var textarea = editor.firstChild;
textarea.onkeypress = function(event) {
return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46
}
textarea.onkeyup = function(event) {
this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '').replace(/\D/g, '');
}
textarea.onpaste = function(event) {
var clipData = event.clipboardData;
return !clipData.getData('text').match(/\D/);
}
textarea.ondragenter = function(event) {
return false;
}
return editor;
};
NumberCellType.prototype.getEditorValue = function(editorContext) {
if (editorContext) {
var input1 = editorContext.firstChild;
var value = $(input1).val();
return value;
}
};
NumberCellType.prototype.setEditorValue = function(editorContext, value) {
if (editorContext && value) {
var input1 = editorContext.firstChild;
$(input1).val(value);
}
};
NumberCellType.prototype.isReservedKey = function(e) {
return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey&& !e.shiftKey && !e.altKey);
};
NumberCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
if (newValue != oldValue) {
return true;
}
return false;
};
var numberCellType = new NumberCellType();
sheet.getCell(0,3).value("11");
sheet.getRange(1,3,5,1).cellType(numberCellType);
}

复制代码

Clark.Pan · Clark.Pan

lin123 发表于 2018-3-20 09:30
还是有问题，在单元格输入数字以后没有显示数字？是个空白的单元格，getEditorValue有问题

textarea 改的地方不只是一处，您将您的代码和我的代码diff一下就能看出修改的地方了

lin123 · lin123

看过的是这两个帖子
http://gcdn.gcpowertools.com.cn/showtopic-23299-1-4.html
http://gcdn.gcpowertools.com.cn/showtopic-23649-1-4.html

Clark.Pan · Clark.Pan

您好：
之前demo是V9的写法，V10中接口有做一些修改，参考下面的写法，这个是修改过后的：

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook($("#ss")[0], { sheetCount : 1 });
var sheet = spread.getActiveSheet();
//非数字禁止输入
function NumberCellType() {
}
NumberCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
NumberCellType.prototype.paint = function(ctx, value, x, y, w, h,style, options) {
if (value) {
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, options ]);
}
};
NumberCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
if (editorContext) {
$(editorContext).width(cellRect.width);
$(editorContext).height(100);
return { height : 100 };
}
};
NumberCellType.prototype.createEditorElement = function(context) {
var editor = GC.Spread.Sheets.CellTypes.Text.prototype.createEditorElement.call(this, context);
//var textarea = editor.firstChild;
editor.onkeypress = function(event) {
return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46
}
editor.onkeyup = function(event) {
this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '').replace(/\D/g, '');
}
editor.onpaste = function(event) {
var clipData = event.clipboardData;
return !clipData.getData('text').match(/\D/);
}
editor.ondragenter = function(event) {
return false;
}
return editor;
};
NumberCellType.prototype.getEditorValue = function(editorContext) {
if (editorContext) {
var input1 = editorContext;
var value = $(input1).val();
return value;
}
};
NumberCellType.prototype.setEditorValue = function(editorContext, value) {
if (editorContext && value) {
var input1 = editorContext;
$(input1).val(value);
}
};
NumberCellType.prototype.isReservedKey = function(e) {
return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey&& !e.shiftKey && !e.altKey);
};
NumberCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
if (newValue != oldValue) {
return true;
}
return false;
};
var numberCellType = new NumberCellType();
sheet.getCell(0,3).value("11");
sheet.getRange(1,3,5,1).cellType(numberCellType);
}

复制代码

lin123 · lin123

本帖最后由 lin123 于 2018-3-20 09:53 编辑

ClarkPan 发表于 2018-3-19 18:07
您好：
之前demo是V9的写法，V10中接口有做一些修改，参考下面的写法，这个是修改过后的：

你好，能限制输入了，我用的好像是v11的，能请教一下您改在哪些地方？是不是就createEditorElement里面的textarea 有问题

lin123 · lin123

本帖最后由 lin123 于 2018-3-20 09:56 编辑

ClarkPan 发表于 2018-3-19 18:07
您好：
之前demo是V9的写法，V10中接口有做一些修改，参考下面的写法，这个是修改过后的：

还是有问题，在单元格输入数字以后没有显示数字？是个空白的单元格，getEditorValue有问题

Clark.Pan · Clark.Pan

lin123 发表于 2018-3-19 18:40
你好，能限制输入了，我用的好像是v11的，能请教一下您改在哪些地方？是不是就createEditorElement里面的 ...

对V9的输入框用的是textarea 目前统一改成DIV显示了，所以原来的方法不适用了

lin123 · lin123

本帖最后由 lin123 于 2018-3-20 16:48 编辑

ClarkPan 发表于 2018-3-20 10:02
对V9的输入框用的是textarea 目前统一改成DIV显示了，所以原来的方法不适用了

你好，大佬，还有点问题要请教
1、有没有办法锁定这个单元格的格式？只允许输入，不让用户更改单元格格式。因为刚才我复制其他单元格ss再黏贴进来就把原格式覆盖掉了，而且限制输入就没了
2、输入法输入的中文字符还是可以输入？怎么把输入法输入中文给限制掉。
我试了使用isImeAware还是限制不了输入法输入的中文、字母

NumberCellType.prototype.isImeAware = function (context) {
return false;
}

复制代码

lin123 · lin123

为了解决输入法出错，根据
https://www.cnblogs.com/xcsn/p/3413074.html
加入了下列代码，还是失败了

editor.onkeydown = function(event) {
if (event.KeyCode == 299) {
event.returnValue=false;
}
}

复制代码

Clark.Pan · Clark.Pan

第一个问题：
设置sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;可以只复制值
第二个问题：
editor.onkeyup = function(event) {
this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '').replace(/\D/g, '');
}
这里的替换需要加入中文的unicode编码

		自动登录	找回密码
密码			立即注册

[已处理] SpreadJS 自定义单元格实现只允许输入数字的功能

45 个回复

微信认证勋章

讲师达人

悬赏达人

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

[已处理] SpreadJS 自定义单元格 实现只允许输入数字的功能

45 个回复

微信认证勋章

讲师达人

悬赏达人

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

[已处理] SpreadJS 自定义单元格实现只允许输入数字的功能