【SpreadJS v16.1 新特性介绍】单元格装饰：角标 / 图标

收藏

本帖最后由 AlexZ 于 2023-6-15 14:13 编辑

背景
新版本可以使用装饰对象将 SpreadJS 中的装饰应用于单元格或单元格范围。这些对象可以包含折角或图标等设置。

设置角折叠
SpreadJS支持在单元格的角上设置折角样式。折角功能在突出显示单元格状态时很有用，例如，当您想显示单元格的无效状态时。
IDecoration界面提供了角折选项，可让您设置折角大小、位置和颜色。折角选项继承自ICornerFold接口，该接口提供大小、位置和颜色等参数。
image.png655941161.png

代码示例

var style = new GC.Spread.Sheets.Style();
style.decoration = {
cornerFold: {
size: 10,
position: GC.Spread.Sheets.CornerPosition.leftTop,
color: "orange"
}
}
sheet.setStyle(5, 1, style);

复制代码

设置图标
新版本支持使用 GC.Spread.Sheets.Style 类中的 icons 属性对可以嵌入到电子表格中的单元格内部或外部的单元格进行图标修饰。
包含文本或值的单元格类型可以用图标修饰，但checkbox和combobox等单元格类型不支持icons属性。
image.png51693114.png

代码示例

//left side in the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left
}
]
};
sheet.setStyle(1, 1, style);

复制代码

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

【SpreadJS v16.1 新特性介绍】单元格装饰：角标 / 图标

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄

SpreadJS 认证

SpreadJS 高级认证