myliang/x-spreadsheet

当单元格内的值满足条件时改变背景色

gtb514753 opened this issue · 2 comments

比如说我想让某个单元格的值大于30的时候背景色变成红色,小于30的时候变成绿色,这个值不固定,请问该怎么实现呢?

感觉可以用valiation
数据后台返回,然后给特定单元格设置校验就可以了

如果 增加一个onBeforeRender函数 实现程序 render cellBox 之前实现 cell 自定义
就能更好的符合这种扩展性较强的需求了
我只是给你提供一个思路 实现起来也很容易

class Cell{
   value : string;
   text : string;
   public onBeforeRender?:(cellBox:Box,  textValue :string)=>void
}

example:

onBeforeRender(cellBox , textValue){
     const {  x, y, width, height, bgcolor,
   } = cellBox;
   context.save();
   context.beginPath();
   let fillStyle = bgcolor || '#fff';
   context.fillStyle = fillStyle;
   if(Number(textValue) > 30 ){
      context.fillStyle = 'red';
   }
   context.rect(Line.npxLine(x + 1), Line.npxLine(y + 1), Pixel.npx(width - 2), Pixel.npx(height - 2));
   context.clip();
   context.fill();
   context.restore();  
}