边框样式优先级

问题：为什么我用代码设置某个单元格边框样式后，会有部分样式不生效？

背景：

在使用表格类产品时，数据填报是一个常见的场景。在这个场景中，用户需要设计一个模板表格，其他用户按照该模板表格填写相应的信息。

为了使模板表格更加清晰美观，添加单元格边框是非常必要的。漂亮的边框样式不仅可以为用户提供明确的填报路径，还能让阅读者清楚了解需要填报的内容。

然而，在设计模板时，经常会遇到这样的情况：明明为某个单元格设置了全边框样式，但总有几条边的样式与设计不一致。当通过API查看该单元格的样式时，却没有发现任何异常。这是因为边框样式的优先级可能不同，而页面上往往显示的是优先级较高的边框样式，所以这并不是一个bug。

原理解释

为了确定边框样式的优先级，我们可以进行对比实验。我们使用控制变量法，分别对边框的粗细、样式和线型进行对照。为了排除相邻单元格位置的差异，我们对每种样式都进行了两组实验，从而判断出单元格位置对样式造成的影响。

例如，在E列和G列分别进行了以下对比组：颜色对比组、粗细对比组、线型对比组。然后，我们删除了F列，这样删除后的两列单元格就相邻了，可以进一步观察边框样式的效果。

通过删除F列我们可以很容易得出如下结论：黑色>红色、粗>细、实线>虚线

在实际生产中，我们通常不仅使用一种样式，而是通过三种样式的交叉组合来实现。对于颜色、粗细和线型，我们需要确定哪个样式优先级更高。

我们选择了某种方法，并假设颜色是最高优先级。这意味着无论其他两个样式如何设置，我们都要根据颜色来决定样式。为此，我们将E15单元格设置为黑色、细的虚线，将G15设置为红色、粗的实线。在这里，细的虚线和红色这两个样式是低优先级，而粗的实线和黑色这两个样式是高优先级。因此，颜色是最高优先级，即使G15的红色边框具有不同的样式，我们也会显示E15单元格的黑色边框样式。

同样的我分别假设粗细优先级最高、线型优先级最高。从而分别作了如上两种对比实现红色粗虚线和和黑色细实线，红色细实线和黑色粗虚线。

接着我们同样删除F列可以很容易得出如下结论：粗细的优先级是三个样式优先级最高的

按照上面的方法，我们对颜色和线型也进行讨论，最后的出，在Excel中粗细>虚实>颜色

我们将上述实验在SpreadJS中进行重现，我们发现在SpreadJS中的边框样式优先级和Excel是不同的，SpreadJS并不会对颜色进行优先级区分，而是对位置进行优先级区分。详细结果如下：

样式优先级总结

我们发现Excel和SpreadJS样式优先级大部分是一致的、除了颜色上。我们很清楚的看到我们的在线表格编辑器的颜色优先级上并不是按照黑色>红色来显示、反而是位置起到了决定作用，于是为了详细了解SpreadJS在边框样式上位置对边框的显示，我们专门对SpreadJS做了一个位置的对比实验。

我们将D4设置为红色单元格，上下左右四个方向单元格设置为黑色，除了位置以外、其他都保持一致（颜色是为了区分哪个位置优先显示），然后我们分别将3、5行和C、E列删除，查看边框样式显示

我们可以很明显的看出，在SpreadJS中，上面单元格的下边框优先于下面单元格的上边框、左边单元格的右边框优先于右边单元格的左边框

综上所述：在SpreadJS中边框优先级为：粗细>线型>位置

解决方案：

如果你记不住边框样式的优先级，或者只想让所有单元格按照你的设想显示，那么我们可以使用一种简单的解决方案。在设置单元格的边框样式之前，我们可以清空与当前单元格相邻的单元格的边框样式，以解决可能出现的样式冲突（在线表格编辑器的UI也是这种方法）。以下是相关代码：

var rowCol = {
  row: 4,
  col: 7,
};// 当前单元格索引

let span = sheet.getSpan(rowCol.row, rowCol.col);// 判断当前单元格是不是合并单元格
let cell = sheet.getCell(
  rowCol.row,
  rowCol.col,
  GC.Spread.Sheets.SheetArea.viewport
);

span = span ? span : cell;

var borderBottom = new GC.Spread.Sheets.LineBorder(null); // 上
sheet
  .getRange(span.row - 1, span.col, 1, span.colCount)
  .setBorder(borderBottom, { bottom: true });// 将上单元格的下边框的样式设置为空

var borderTop = new GC.Spread.Sheets.LineBorder(null); // 下
sheet
  .getRange(span.row + 1, span.col, 1, span.colCount)
  .setBorder(borderTop, { top: true });// 将下单元格的上边框的样式设置为空

var borderLeft = new GC.Spread.Sheets.LineBorder(null); // 右
sheet
  .getRange(span.row, span.col + span.colCount, span.rowCount, 1)
  .setBorder(borderLeft, { left: true });// 将右单元格的左边框的样式设置为空

var borderRight = new GC.Spread.Sheets.LineBorder(null); // 左
sheet
  .getRange(span.row, span.col - 1, span.rowCount, 1)
  .setBorder(borderRight, { right: true });// 将左单元格的右边框的样式设置为空

// 设置当前单元格的样式
var lineStyle = GC.Spread.Sheets.LineStyle.thin;
var lineBorder = new GC.Spread.Sheets.LineBorder("green", lineStyle);
var sheetArea = GC.Spread.Sheets.SheetArea.viewport;
sheet
  .getRange(span.row, span.col, span.rowCount, span.colCount)
  .setBorder(lineBorder, { all: true }, sheetArea);

大家可以将附件的xlsx文件下载到本地进行测试

样式优先级探讨.xlsx