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

lin123 · lin123

本帖最后由 lin123 于 2018-3-21 09:49 编辑

ClarkPan 发表于 2018-3-20 18:42
第一个问题：
设置sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;可 ...

您好，
1、这个选项设置了，但是CTRL+V进去的值都进去了，对于进去的值的判断没有生效
editor.onpaste = function(event) {
            var clipData = event.clipboardData;
            return !clipData.getData('text').match(/\D/);
         }

而且单元格通过拖拉还是能够覆盖原格式

2、这段代码里面的replace(/[\u4e00-\u9fa5]/g, '')就是中文Unicode的编码，可是没有生效

lin123 · lin123

刚刚在onkeyup里面加了alert测试，才发现value根本就没有值，都是undefined
editor.onkeyup = function(event) {
alert("keyCode="+event.keyCode+"\n value="+this.value);
this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '')
.replace(/\D/g, '');

}

Clark.Pan · Clark.Pan

1.如果要再加上限制判断，需要监听剪切板相关事件，在事件中进行判断，因为目前只是在输入框中进行了判断，而粘贴是不会触发输入框的，spreadjs所有事件参考：
http://help.grapecity.com/spread ... .Sheets.Events.html
2.第二个问题，加上判断空之后还会不会有问题呢？

lin123 · lin123

本帖最后由 lin123 于 2018-3-22 10:45 编辑

ClarkPan 发表于 2018-3-21 19:02
1.如果要再加上限制判断，需要监听剪切板相关事件，在事件中进行判断，因为目前只是在输入框中进行了判断， ...

其实我想要单元格的格式不让用户覆盖掉，监听的话是在

Events.ClipboardPasting时判断是不是在那个单元格类型，再处理。

感觉下面的这两个弄好应该就能实现。下面是我的代码文件，你看看

<div>NumberCellType.prototype.getEditorValue = function(editorContext) {
if (editorContext) {
var input = editorContext;
var value = $(input).val();
return value;//没取到值
}
};
NumberCellType.prototype.setEditorValue = function(editorContext, value) {</div><div> if (editorContext && value) {
var input = editorContext;
$(input).val(value);
}
};</div>

复制代码

Clark.Pan · Clark.Pan

您好该了一下代码，参考：

$(document).ready(function () {
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.innerHTML = this.innerHTML.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.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);
}
});

复制代码

这里没有实现复制粘贴功能，这块可以监听ClipboardPasting事件，在事件中检测是否符合输入规则，不符合调用cancel来取消复制。
复制可以设置sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values; 这样只会粘贴值，不会粘贴格式
另外拖拽本身就是会覆盖格式的，如果您不想覆盖可以禁止拖拽功能。

lin123 · lin123

本帖最后由 lin123 于 2018-3-23 09:52 编辑

ClarkPan 发表于 2018-3-22 16:51
您好该了一下代码，参考：

this.innerHTML和以前的this.value一样，没效果

试了监听，里面没有设置的pasteData的方法，倒是可以获取值

<div>sheet.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {
var pastedText = args.pasteData.text;
console.log("ing"+pastedText+"\n");
});</div><div>sheet.bind(GC.Spread.Sheets.Events.ClipboardPasting, function (sender, args) {
var pasteData = args.pasteData;
var pastedText = args.pasteData.text;
pasteData.setData('text',1);
console.log("ing"+args.pasteData.text);
});</div>

复制代码

但是能获取却改不了又没有用。看了api里面，没有改的方法
http://help.grapecity.com/spread ... oardPasting_EV.html

里面的remarks里面没有设置的方法

Clark.Pan · Clark.Pan

您用的是哪个版本的SpreadJS，我在V11版本中试了，没有问题啊，这个是我通过debug调试出来取值的结果，这样demo给您，您再看看。
另外粘贴那个就像我之前说的，在事件中取出剪切板的值去判断，如果不符合规则，将本次粘贴操作取消就可以了。取消粘贴操作：
args.cancel = true；
这个代码demo中也有，您看一下

lin123 · lin123

ClarkPan 发表于 2018-3-23 09:42
您用的是哪个版本的SpreadJS，我在V11版本中试了，没有问题啊，这个是我通过debug调试出来取值的结果，这样 ...

不是要取消黏贴，是要改黏贴版里的值

lin123 · lin123

本帖最后由 lin123 于 2018-3-23 09:48 编辑

ClarkPan 发表于 2018-3-23 09:42
您用的是哪个版本的SpreadJS，我在V11版本中试了，没有问题啊，这个是我通过debug调试出来取值的结果，这样 ...

在监听里面能知道值
var pastedText = args.pasteData.text;
但有没有办法改这个值，然后在黏贴

lin123 · lin123

ClarkPan 发表于 2018-3-23 09:42
您用的是哪个版本的SpreadJS，我在V11版本中试了，没有问题啊，这个是我通过debug调试出来取值的结果，这样 ...

你好，你这个model看了，有些地方没有影响到需要的功能，所以我去掉了。
请看一下我这个版本的，最下面的监听需要改变黏贴版里的值怎么弄？

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

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

评分

浏览过的版块

微信认证勋章

讲师达人

悬赏达人

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

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

评分

浏览过的版块

微信认证勋章

讲师达人

悬赏达人

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

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