选中区域起始行和结束行边框设置

收藏

为了突出显示数据，可以对数据所在单元格设置样式以强调。如果数据位于连续的单元格区域，也可以对该区域设置样式以实现。如图1所示，可对选中区域设置背景色或字体颜色或字号或边框。

图1. 单元格区域设置样式

那么，如何通过代码实现呢？首先，目标对象是单元格或单元格区域，SpreadJS的单元格和单元格区域均由CellRange对象抽象实现。其次，对目标对象设置的字体、字号、背景色、边框线等均是一种样式。SpreadJS和Exce都l允许对单元格设置多种不同的样式效果，以上样式效果分别作为属性被封装为Style对象。因此，在代码中，对目标单元格区域通过CellRange:setStyle()显式设置实例化了不同样式属性的Style对象，即可将Style对象中设置的样式属性统统作用在单元格区域。

如果目标单元格区域跨越行列数较多，想要通过边框线标识其起始行和结束行，那么，也可以参照上述方式实例化Style对象，并分别设置其borderTop、borderBottom的边框线，而后将Style对象作用在单元格区域。然而，如果单元格区域本就存在其他样式效果，新实例化的Style对象将覆盖原有Style对象。为了保留原有样式效果，可以先获取单元格区域的原有样式Style对象，并针对该Style对象设置borderTop、borderBottom。

此外，也可以通过CellRange:borderTop()和CellRange:borderBottom()对单元格区域分别设置顶部和底部边框线，这样便不用手动创建Style对象，如下代码所示。后台程序正是先尝试获取单元格区域原有的Style对象，如不存在才创建新Style对象，而后将borderTop和borderBottom具象化。如图2所示，为选中的单元格区域起始行设置蓝色边框线、结束行设置红色边框线。

sheet.getRange(selectedRange.row, selectedRange.col, 1, selectedRange.colCount)
.borderTop(new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium));
sheet.getRange(selectedRange.row + selectedRange.rowCount, selectedRange.col, 1, selectedRange.colCount)
.borderTop(new GC.Spread.Sheets.LineBorder("red",GC.Spread.Sheets.LineStyle.medium));

复制代码

图2. 选中区域起始行和结束行边框设置

附上demo，以供参考。

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

选中区域起始行和结束行边框设置

0 个回复