单元格背景色之优先级（一）

收藏

本帖最后由 Ellia.Duan 于 2024-9-19 16:13 编辑

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

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

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

1、执行下面的代码：

sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(0,0,5,5).backColor('orange')

复制代码

结果如下：

2、替换下顺序，执行下面的代码：

sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')

复制代码

结果如下：

目前看起来，似乎优先级是一样的，和执行顺序有关，渲染结果依赖于最后执行的代码。为了验证此问题，升级一下代码，增加全部区域的背景色。

3、执行下面的代码

sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')

复制代码

结果如下：

4、替换代码执行顺序：

sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')

复制代码

结果如下：

观察上述代码中三个区域，row,col都是0 ，rowCount和colCount不一样，范围是依次扩大的。

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

接下来，我们来一点row,col不一样的参数，通过getRange()设置一下行列背景色。
5、执行下面的代码：

sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(-1,1,-1,1).backColor('green')
sheet.getRange(0,-1,1,-1).backColor('yellow')

复制代码

发现行列背景色没有显示出来。
image.png417444457.png

6、我们先注释掉第一行代码

// sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(-1,1,-1,1).backColor('green')
sheet.getRange(0,-1,1,-1).backColor('yellow')

复制代码

结果如下：

我们观察上图，发现区域样式的优先级高于行列样式优先级。

7、我们再注释掉第二行代码：

// sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()).backColor('blue')
// sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(-1,1,-1,1).backColor('green')
sheet.getRange(0,-1,1,-1).backColor('yellow')

复制代码

结果如下：

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

8、上述代码始终是sheet.getRange(0,0,sheet.getRowCount(),sheet.getColumnCount()) 那么sheet.getRange(-1,-1)又有什么区别呢？
执行下面的代码

sheet.getRange(-1,-1,-1,-1).backColor('purple')
sheet.getRange(0,0,5,5).backColor('orange')
sheet.getRange(0,0,1,1).backColor('red')
sheet.getRange(-1,1,-1,1).backColor('green')
sheet.getRange(0,-1,1,-1).backColor('yellow')

复制代码

结果如下：

而下面两行的代码效果是一样的。

sheet.getRange(-1,-1,-1,-1).backColor('purple')
sheet.getRange(-1,-1).backColor('grey')

复制代码

所以，我们可以理解为sheet.getRange(-1,-1)获取的是整个表单区域。即单元格样式>行样式>列样式>表单样式。
那通过本文，大家是不是已经对getRange()设置的背景色样式的优先级有一个初步了解呢？我们将在下一篇文章中介绍，getCell的优先级。

		自动登录	找回密码
密码			立即注册

单元格背景色之优先级（一）

0 个回复

SpreadJS 认证

SpreadJS 高级认证