自定义单元格类型被单元格样式覆盖

您好

我创建了一个自定义单元格类型，设置之后 再设置单元格的样式以后， 自定义单元格类型 被覆盖了

1. export class CustomCellType extends GC.Spread.Sheets.CellTypes.Text {
   
2.   size: number;
   
3.   cusColor: string
   
4.   constructor(cusColor: string) {
   
5.     super();
   
6.     this.size = 10;
   
7.     this.cusColor = cusColor
   
8.   }
   
9. }
   
10. CustomCellType.prototype.paint = function(context, value, x1, y1, a1, b1, style, ctx) {
    
11.   if (!context) {
    
12.     return;
    
13.   }
    
14.   var a = (a1 + 2) / 2;
    
15.   var b = (b1 + 2) / 2;
    
16.   var x = a + x1;
    
17.   var y = b + y1;
    
18.   var ox = 0.5 * a,
    
19.     oy = 0.6 * b;
    
20.   context.save();
    
21.   context.translate(x, y);
    
22.   context.beginPath();
    
23.   context.strokeStyle = this.cusColor;
    
24.   context.lineWidth = 2;
    
25.   context.moveTo(0, b);
    
26.   context.bezierCurveTo(ox, b, a, oy, a, 0);
    
27.   context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
    
28.   context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
    
29.   context.bezierCurveTo(-a, oy, -ox, b, 0, b);
    
30.   context.closePath();
    
31.   context.stroke();
    
32.   context.restore();
    
33.   GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(
    
34.     this,
    
35.     context,
    
36.     value,
    
37.     x1,
    
38.     y1,
    
39.     a1,
    
40.     b1,
    
41.     style,
    
42.     ctx,
    
43.   );
    
44. };
    
45. CustomCellType.prototype.getHitInfo = function(x, y, cellStyle, cellRect, context) {
    
46.   var xm = cellRect.x + cellRect.width / 2,
    
47.     ym = cellRect.y + cellRect.height / 2,
    
48.     size = 10;
    
49.   var info = {
    
50.     x: x,
    
51.     y: y,
    
52.     row: context.row,
    
53.     col: context.col,
    
54.     cellRect: cellRect,
    
55.     sheetArea: context.sheetArea,
    
56.     isReservedLocation: false,
    
57.   };
    
58.   if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
    
59.     info.isReservedLocation = true;
    
60.   }
    
61.   return info;
    
62. };

复制代码

1. sheet.setCellType(2, 3, new CustomCellType('red'));

复制代码

设置自定义单元格类型后 在某些场景下设置该单元格的样式

1. const editColumnStyle = new spreadNS.Style();
   
2. editColumnStyle.name = 'editColumnStyle';
   
3. editColumnStyle.borderTop = new GC.Spread.Sheets.LineBorder(
   
4.       '#e4e4e4',
   
5.       GC.Spread.Sheets.LineStyle.thin,
   
6.     );
   
7.     editColumnStyle.borderRight = new GC.Spread.Sheets.LineBorder(
   
8.       '#e4e4e4',
   
9.       GC.Spread.Sheets.LineStyle.thin,
   
10.     );
    
11.     editColumnStyle.borderBottom = new GC.Spread.Sheets.LineBorder(
    
12.       '#e4e4e4',
    
13.       GC.Spread.Sheets.LineStyle.thin,
    
14.     );
    
15.     editColumnStyle.borderLeft = new GC.Spread.Sheets.LineBorder(
    
16.       '#e4e4e4',
    
17.       GC.Spread.Sheets.LineStyle.thin,
    
18.     );
    
19. sheet.addNamedStyle(editColumnStyle);
    
20. sheet.setStyleName(0, -1, 'nullColumnStyle');
    
21. sheetRef.setStyleName(-1, 4, 'editColumnStyle');

复制代码

原本生效的单元格类型 被背景色覆盖
未设置backcolor


设置后


请问这个问题怎么解决

另外，请问下我想让这个红圈放大一些，能在单元格** 类似 校验失败的 样式  应该怎么设置值  

您好，这边建议您可以用条件格式去做
这是咱们官方的demo，您可以看下
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/cells/conditional-format/basic-conditional-format/purejs

条件格式是支持边框的，而且样式优先级最高，关于样式优先级您可以看下这边文章
https://gcdn.grapecity.com.cn/showtopic-78902-1-1.html

在按钮中添加指定的规则，可以让单元格显示指定样式的边框

这是边框样式的API
https://demo.grapecity.com.cn/spreadjs/help/api/GC.Spread.Sheets.Style.html#borderBottom

更多有关api您可以查阅
https://demo.grapecity.com.cn/spreadjs/help/api/

问题正在处理，预计明天给您答复。

没有复现这个问题，您看下能否在这个Demo  上复现下您的问题

Fiooona 发表于 2020-8-19 14:20
没有复现这个问题，您看下能否在这个Demo  上复现下您的问题

你好  demo是这个，初始化 时候 和点击 按钮   设置的背景色都会覆盖 那个圆框。您看下，麻烦啦

aubreyqian 发表于 2020-8-19 23:01
你好  demo是这个，初始化 时候 和点击 按钮   设置的背景色都会覆盖 那个圆框。您看下，麻烦啦

已收到，正在处理

您好，这是SpreadJS的渲染机制导致背景色将自定义单元格的样式覆盖，这是问题的原因。

您可以具体说下您的需求或使用场景吗？这边看能否给您提供更好地解决方案。

DerrickJiao 发表于 2020-8-20 13:59
您好，这是SpreadJS的渲染机制导致背景色将自定义单元格的样式覆盖，这是问题的原因。

您可以具体说下您 ...

您好
场景是这样的，excel正常情况下是lock的， 我通过点击按钮解锁部分列，可以编辑，对于可以编辑的列是需要蓝色背景色的。
在编辑状态下（即蓝色背景色下），需要点击按钮，圈出某个单元格（可能是蓝色背景的单元格），切不覆盖单元格的内容。
用数据校验createTextLengthValidator(CO.between, 0, 255); 也可以圈出，但是编辑的单元格本身就有数据校验，如果通过createTextLengthValidator来圈出的话 我怕会造成校验混乱。
麻烦您能帮我看下有什么解决方式么   

谢谢啦

DerrickJiao 发表于 2020-8-21 09:55
您好，这边建议您可以用条件格式去做
这是咱们官方的demo，您可以看下
https://demo.grapecity.com.cn/sp ...

感谢您的回复。
还想请问下，如果我用条件格式 来圈出我需要圈出的单元格。圈出的样式可以制作成上面回复中 红色椭圆形的自定义单元格那样的样式么？
如果不用条件格式，用数据验证 中的红色椭圆 去圈出需要的单元格，那么请问 一个单元格 可以设置多个 不关联的 数据验证公式 且 验证效果的样式不一样么？
数据验证可以非常自由的定义么？我现在看是有验证器的， 我想要的时候 比如我往一个单元格塞了一个tag,去验证这个tag 这样

aubreyqian 发表于 2020-8-21 16:36
感谢您的回复。
还想请问下，如果我用条件格式 来圈出我需要圈出的单元格。圈出的样式可以制作成上面回 ...

您好，数据验证没办法实现如您所说的这么灵活丰富的需求

单元格上的验证器只能挂一个，但条件格式就可以挂多个。

还是建议您考虑条件格式的。