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

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

1. window.onload = function() {
   
2.    var spread = new GC.Spread.Sheets.Workbook($("#sheet")[0], { sheetCount : 1 });
   
3.   var sheet = spread.getActiveSheet();
   
4.   //非数字禁止输入
   
5.   function NumberCellType() {
   
6.   }
   
7.   NumberCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
   
8.   NumberCellType.prototype.paint = function(ctx, value, x, y, w, h,style, options) {
   
9.    if (value) {
   
10.     GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, options ]);
    
11.    }
    
12.   };
    
13.   NumberCellType.prototype.updateEditor = function(editorContext,  cellStyle, cellRect) {
    
14.    if (editorContext) {
    
15.     $(editorContext).width(cellRect.width);
    
16.     $(editorContext).height(100);
    
17.     return {  height : 100 };
    
18.    }
    
19.   };
    
20.   NumberCellType.prototype.createEditorElement = function(context) {
    
21.    var editor = GC.Spread.Sheets.CellTypes.Base.createEditorElement.call(this, context);
    
22.    var textarea = editor.firstChild;
    
23.    textarea.onkeypress = function(event) {
    
24.     return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46
    
25.    }
    
26.    textarea.onkeyup = function(event) {
    
27.     this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '').replace(/\D/g, '');
    
28.    }
    
29.    textarea.onpaste = function(event) {
    
30.     var clipData = event.clipboardData;
    
31.     return !clipData.getData('text').match(/\D/);
    
32.    }
    
33.    textarea.ondragenter = function(event) {
    
34.     return false;
    
35.    }
    
36.    return editor;
    
37.   };
    
38.   NumberCellType.prototype.getEditorValue = function(editorContext) {
    
39.    if (editorContext) {
    
40.     var input1 = editorContext.firstChild;
    
41.     var value = $(input1).val();
    
42.     return value;
    
43.    }
    
44.   };
    
45.   NumberCellType.prototype.setEditorValue = function(editorContext, value) {
    
46.    if (editorContext && value) {
    
47.     var input1 = editorContext.firstChild;
    
48.     $(input1).val(value);
    
49.    }
    
50.   };
    
51.   NumberCellType.prototype.isReservedKey = function(e) {
    
52.    return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey&& !e.shiftKey && !e.altKey);
    
53.   };
    
54.   NumberCellType.prototype.isEditingValueChanged = function(oldValue,  newValue) {
    
55.    if (newValue != oldValue) {
    
56.     return true;
    
57.    }
    
58.    return false;
    
59.   };
    
60.   var numberCellType = new NumberCellType();
    
61.   sheet.getCell(0,3).value("11");
    
62.   sheet.getRange(1,3,5,1).cellType(numberCellType);
    
63. }
    

复制代码

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

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

不客气，有什么不明白的地方欢迎随时进行询问

ClarkPan 发表于 2018-3-30 11:48
$editor.attr("gcUIElement", "gcEditingInput");这句话是告诉spreadjs咱们自定义的input输入框为spreadjs ...

虽然还不大明白，不过谢谢你

$editor.attr("gcUIElement", "gcEditingInput");这句话是告诉spreadjs咱们自定义的input输入框为spreadjs内部的组件，这样相关处理就不会将其当做是外部的内容了，您自定义时候最好加上这句话。

ClarkPan 发表于 2018-3-30 09:27
为什么之前改呢是因为V11版本中将编辑框默认由input改为了div，所以原先input的取值就不能再用了，只能用in ...

你好，版主，
这行代码中的$editor.attr("gcUIElement", "gcEditingInput");
gcUIElement与gcEditingInput是什么？内置的参数？

删掉这行有什么影响？

为什么之前改呢是因为V11版本中将编辑框默认由input改为了div，所以原先input的取值就不能再用了，只能用innerText去取div的值，但是发现div会有您说的顺序颠倒的问题，所以就只能彻底用自定义单元格来完成了，我在下图位置创建了input对象来当作输入框

所以需要用this.value来获取input中的内容，因为input和div的取值方式不同

ClarkPan 发表于 2018-3-29 18:09
应该是div的问题，我改了一下demo，改成input就可以了

额，这个以前就是this.value，后来调试时出错了，根据你的意见改成this.innerText,然后就出现输入颠倒。后来就删掉这段代码。

应该是div的问题，我改了一下demo，改成input就可以了

ClarkPan 发表于 2018-3-29 13:37
不太明白您说的，这个只是一个替换，为什么会导致您输入模式变换了，您要不把代码抽离成一个简单的可以重现 ...

我输入的是123

ClarkPan 发表于 2018-3-29 13:37
不太明白您说的，这个只是一个替换，为什么会导致您输入模式变换了，您要不把代码抽离成一个简单的可以重现 ...

你把注释掉的那些代码还原，就会出现插入数据从123变成321