【14.0.2】复选框单元格背景色设置?

1. var checkBoxStyle = new spreadNS.CellTypes.CheckBox();

复制代码

这个小框框的背景色能不能弄成灰色的，就是禁止状态那种的？

你是想要把这个复选框方框内设置成灰色吗，可以考虑在CheckBox基础上 来自定义单元格，通过paint 方法重绘一下

Richard.Ma 发表于 2022-10-27 17:59
你是想要把这个复选框方框内设置成灰色吗，可以考虑在CheckBox基础上 来自定义单元格，通过paint 方法重绘 ...

对啊，请问怎么实现呢？有没有简单的方法？

其实在线示例中的自定义单元格示例第一列就相当于一个重新绘制的复选框了，你只需要改变一下其中的paint绘制的内容，以及去掉processMouseUp就行了
https://demo.grapecity.com.cn/sp ... types/custom/purejs

绘制部分修改的代码

1. ctx.rect(x, y, w, h);
   
2.             ctx.clip();
   
3.             ctx.beginPath();
   
4.             ctx.fillStyle = "lightgray";
   
5.             ctx.strokeStyle = "black";
   
6.             ctx.fillRect(x+5,y+5,12,12);
   
7.             ctx.strokeRect(x+5,y+5,12,12);
   
8.             
   
9.             if (value) {
   
10.                 ctx.moveTo(x+6,y+9);
    
11.                 ctx.lineTo(x+6+5,y+7+7);
    
12.                 ctx.lineTo(x+6+12,y+7);
    
13.                 ctx.stroke();
    
14.             } else {
    
15.                 ctx.fillStyle = "gray";
    
16.             }
    

复制代码

Richard.Ma 发表于 2022-10-28 09:13
其实在线示例中的自定义单元格示例第一列就相当于一个重新绘制的复选框了，你只需要改变一下其中的paint绘 ...

1. function CheckBoxCellType() {
   
2.         spreadNS.CellTypes.CheckBox.apply(this);
   
3.     }
   
4.     CheckBoxCellType.prototype = new spreadNS.CellTypes.CheckBox();
   
5.     var basePaint = spreadNS.CellTypes.CheckBox.prototype.paint;
   
6.     CheckBoxCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
   
7.         var tag = !!(context.sheet.getTag(context.row, context.col, context.sheetArea) || false);
   
8.         ctx.fillStyle = "gray";
   
9.         basePaint.apply(this, [ctx, tag, x, y, width, height, style, context]);
   
10.     };

复制代码

1. sheet.setCellType(row, col, new CheckBoxCellType()

复制代码

请问，我如果想用你说的继承checkbox类又怎么实现呢？  checkbox单元格已经有所有我要的功能，只是要加个填充色，但是这个点击没勾选效果，怎么回事啊？

如果你是说要添加矩形的填充色的话，这个不好加，我看你设置了fillStyle ，比如你再去fillRect,会覆盖原来的复选框的，所以复选框样式这块，如果你要修改，就参考上面的代码，重新绘制，包括复选框边框，填充，以及上面的对钩。

Richard.Ma 发表于 2022-10-28 12:34
如果你是说要添加矩形的填充色的话，这个不好加，我看你设置了fillStyle ，比如你再去fillRect,会覆盖原来 ...

但是上面代码绘制出来的样式好丑，点击也有问题，没办法和cheboxbox比啊，wi想要完美复刻的情况下，加个背景色

关于复选框样式：

如果要重新绘制的话，绘制的代码这个仅供参考，具体的优化你可以自己再重新写

原来的复选框没有办法单独加背景色，原因上面也提到了

不过给你也想了一个办法，可以淡化颜色，实现类似的效果。可以在调用默认的绘制前降低复选框单元格的canvas透明度，让复选框看起来变淡

1.         ctx.globalAlpha = 0.4;
   
2.         spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
   
3.         ctx.globalAlpha =1;

复制代码

效果是这样的

Richard.Ma 发表于 2022-10-28 17:14
关于复选框样式：

如果要重新绘制的话，绘制的代码这个仅供参考，具体的优化你可以自己再重新写

能给我个完整代码吗？ 我不会用，而且我也不懂canvas

请参考下面的示例，其中禁止编辑是通过表单保护设置的，你可以根据需要选择是否设置

features_cells_cell-types_custom_JavaScript (1).zip (7.75 KB, 下载次数: 16)

2022-10-31 09:37 上传

点击文件名下载附件