找回密码
 立即注册

QQ登录

只需一步,快速开始

Ellia.Duan SpreadJS 开发认证
超级版主   /  发表于:2024-9-19 15:04  /   查看:368  /  回复:0
本帖最后由 Ellia.Duan 于 2024-9-19 16:13 编辑

在这篇文章中,介绍了单元格的样式优先级:单元格样式>行样式>列样式>表单默认样式。

但是,我们也知道,还可以通过条件格式为单元格设置背景色,可以通过命名样式设置背景色,以及getRange(0,0,sheet.getRowCount(),sheet.getColCount)和sheet.getCell(-1,-1)对单元格背景色的区别是什么呢?我们将分几篇文章详细介绍这部分内容。

在此文中,我们先介绍通过getRange设置背景色的优先级。这是因为getRange()可以获取单个单元格区域,或者行区域,列区域或者整个表单区域。


1、执行下面的代码:
  1.         sheet.getRange(0,0,1,1).backColor('red')
  2.         sheet.getRange(0,0,5,5).backColor('orange')
复制代码
结果如下:
image.png992809448.png


2、替换下顺序,执行下面的代码:
  1. sheet.getRange(0,0,5,5).backColor('orange')
  2.         sheet.getRange(0,0,1,1).backColor('red')
复制代码
结果如下:
image.png191334838.png
目前看起来,似乎优先级是一样的,和执行顺序有关,渲染结果依赖于最后执行的代码。为了验证此问题,升级一下代码,增加全部区域的背景色。

3、执行下面的代码
  1.   sheet.getRange(0,0,5,5).backColor('orange')
  2.         sheet.getRange(0,0,1,1).backColor('red')
  3.         sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
复制代码
结果如下:
image.png435874022.png


4、替换代码执行顺序:
  1.       sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
  2.         sheet.getRange(0,0,5,5).backColor('orange')
  3.         sheet.getRange(0,0,1,1).backColor('red')
复制代码
结果如下:
image.png911900634.png
观察上述代码中三个区域,row,col都是0 ,rowCount和colCount不一样,范围是依次扩大的。

针对上述代码,我们得出一个结论:通过getRange()获取区域后设置背景色,当row,col一样,rowCount和colCount不一样时。与代码执行顺序有关。如果想为多个重叠区域设置背景色,应当先设置范围大的背景色,再设置范围小的背景色。

接下来,我们来一点row,col不一样的参数,通过getRange()设置一下行列背景色。
5、执行下面的代码:
  1.         sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
  2.         sheet.getRange(0,0,5,5).backColor('orange')
  3.         sheet.getRange(0,0,1,1).backColor('red')
  4.         sheet.getRange(-1,1,-1,1).backColor('green')
  5.         sheet.getRange(0,-1,1,-1).backColor('yellow')
复制代码
发现行列背景色没有显示出来。
image.png417444457.png


6、我们先注释掉第一行代码
  1.         // sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
  2.         sheet.getRange(0,0,5,5).backColor('orange')
  3.         sheet.getRange(0,0,1,1).backColor('red')
  4.         sheet.getRange(-1,1,-1,1).backColor('green')
  5.         sheet.getRange(0,-1,1,-1).backColor('yellow')
复制代码
结果如下:
image.png713374938.png
我们观察上图,发现区域样式的优先级高于行列样式优先级。


7、我们再注释掉第二行代码:
  1.     // sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
  2.         // sheet.getRange(0,0,5,5).backColor('orange')
  3.         sheet.getRange(0,0,1,1).backColor('red')
  4.         sheet.getRange(-1,1,-1,1).backColor('green')
  5.         sheet.getRange(0,-1,1,-1).backColor('yellow')
复制代码
结果如下:
image.png954137573.png

我们观察上图,很明显可以看到:单元格样式>行样式>列样式。而同等样式级别下,会根据代码执行顺序进行覆盖。

8、上述代码始终是sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()) 那么sheet.getRange(-1,-1)又有什么区别呢?
执行下面的代码
  1.    sheet.getRange(-1,-1,-1,-1).backColor('purple')
  2.         sheet.getRange(0,0,5,5).backColor('orange')
  3.         sheet.getRange(0,0,1,1).backColor('red')
  4.         sheet.getRange(-1,1,-1,1).backColor('green')
  5.         sheet.getRange(0,-1,1,-1).backColor('yellow')
复制代码
结果如下:
image.png273089598.png
而下面两行的代码效果是一样的。
  1.         sheet.getRange(-1,-1,-1,-1).backColor('purple')
  2.         sheet.getRange(-1,-1).backColor('grey')
复制代码
所以,我们可以理解为sheet.getRange(-1,-1)获取的是整个表单区域。即单元格样式>行样式>列样式>表单样式。
那通过本文,大家是不是已经对getRange()设置的背景色样式的优先级有一个初步了解呢?我们将在下一篇文章中介绍,getCell的优先级。

优先级1.html

3.4 KB, 下载次数: 17

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部