自定义组件的问题

产品：SpreadJS
版本：V17.0.4

designer自定义celltype当单元格为空和没有任何改变时也会触发editCell ，希望自定义celltype和默认保持一致，当值没有变化时不触发editcell，下面是自定义cellType代码

1. import * as GC from '@grapecity/spread-sheets'
   
2. 
   
3. /**
   
4. * 自定义单元格类型
   
5. */
   
6. type cellType = 'number' | 'integer' | 'identifier' | 'string'
   
7. class CustomCellType extends GC.Spread.Sheets.CellTypes.Base {
   
8.   type: cellType
   
9.   precision: number
   
10.   constructor(type: cellType = 'string', precision: number = 2) {
    
11.     super()
    
12.     this.typeName = 'CustomCellType'
    
13.     this.type = type
    
14.     this.precision = precision
    
15.   }
    
16.   paint(ctx: CanvasRenderingContext2D, value: any, x: number, y: number, w: number, h: number, style: GC.Spread.Sheets.Style, context?: any): void {
    
17.     GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context])
    
18.   }
    
19.   createEditorElement(context?: any): HTMLInputElement {
    
20.     const input = document.createElement('input')
    
21.     input.setAttribute('data-col', context.col)
    
22.     input.setAttribute('data-row', context.row)
    
23.     return input
    
24.   }
    
25.   activateEditor(editorContext: HTMLInputElement, cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any): void {
    
26.     if (editorContext) {
    
27.       GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, [editorContext, cellStyle, cellRect, context])
    
28.       editorContext.style.position = 'absolute'
    
29.       const format = () => {
    
30.         const value = editorContext.value
    
31.         if (this.type == 'number') editorContext.value = value.replace(new RegExp(`^(-?\\d*\\.?\\d{0,${this.precision}}).*`), '$1')
    
32.         if (this.type == 'integer') editorContext.value = value.replace(/\D/g, '')
    
33.         if (this.type == 'identifier') editorContext.value = value.replace(/[^A-Za-z0-9/g, '')
    
34.       }
    
35.       editorContext.addEventListener('input', format)
    
36.       editorContext.addEventListener('change', format)
    
37.     }
    
38.   }
    
39.   deactivateEditor(editorContext: HTMLInputElement, context?: any): void {
    
40.     GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.apply(this, [editorContext, context])
    
41.   }
    
42.   getEditorValue(editorContext: HTMLInputElement, context?: any): string {
    
43.     return editorContext.value
    
44.   }
    
45.   setEditorValue(editorContext: HTMLInputElement, value: any, context?: any): void {
    
46.     if (value) editorContext.value = value
    
47.   }
    
48.   updateEditor(editorContext: HTMLInputElement, cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any): GC.Spread.Sheets.Rect | any {
    
49.     if (editorContext) {
    
50.       editorContext.style.width = '1000px'
    
51.       editorContext.style.height = '1000px'
    
52.     }
    
53.   }
    
54. }
    
55. export default CustomCellType

复制代码

麻烦帮忙排查问题，不要再建议监听其他事件了，就editCell

zyh2123606 发表于 2024-5-28 15:29
好的，非常感谢

好的，本帖子的问题解决，这里就先结帖了。后续如果您有新的问题，也欢迎创建新的求助帖。请记得设置最佳答案。

好的，非常感谢

收到您的自定义单元格类型代码了，我们将进行深入调研，会尽快给您进行回复

您好，经过测试调研，我们发现您没有写isEditingValueChanged这个方法，导致每次进入编辑后退出时，该方法都return一个true，然后会触发一次editCell这个指令，您只要重写一下这个方法并在里面最对应的判断即可：

1. CustomCellType.prototype.isEditingValueChanged = function (oldValue, newValue) {
   
2.     if (newValue != oldValue) {
   
3.         return true;
   
4.     }
   
5.     return false;
   
6. };

复制代码