利用单元格按钮自定义单元格背景图

收藏

本帖最后由 Lynn.Dou 于 2021-6-28 13:48 编辑

想要给一个单元格设置背景图如何实现呢？
大家最先想到的应该是 backgroundImage 方法，
但是这种方式下，背景图的大小和在单元格的位置无法自定义。
今天就带领大家学习一种新的方式：利用单元格按钮自定义单元格背景图。

1、
为了更直观的展示效果，直接在在线表格编辑器进行了演示，具体请看下方动图。

2、用代码实现上述功能如下：

var sheet = spread.getActiveSheet()
var style = new GC.Spread.Sheets.Style();
//style.locked = true;
style.cellButtons = [
{
useButtonStyle: false,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
imageSize: {
height: 15,
width: 15
},
enabled: false
}
];
sheet.setStyle(1,1,style);

复制代码

3、最后，如果希望此单元格不可以被编辑（只读），结合表单保护就可以实现了。
完整代码如下：

var sheet = spread.getActiveSheet()
var style = new GC.Spread.Sheets.Style();
style.locked = true;
style.cellButtons = [
{
useButtonStyle: false,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
imageSize: {
height: 15,
width: 15
},
enabled: false
}
];
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.locked = false;
sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1,1,style);
sheet.options.isProtected = true;

复制代码

效果如下图：

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

利用单元格按钮自定义单元格背景图

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人