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

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

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

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

1. var sheet = spread.getActiveSheet()
   
2. var style = new GC.Spread.Sheets.Style();
   
3. //style.locked = true;
   
4. style.cellButtons = [
   
5.         {
   
6.                 useButtonStyle: false,
   
7.                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
   
8.                 imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
   
9.                 imageSize: {
   
10.                         height: 15,
    
11.                         width: 15
    
12.                 },
    
13.                 enabled: false
    
14.         }
    
15. ];
    
16. sheet.setStyle(1,1,style);

复制代码

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

1. var sheet = spread.getActiveSheet()
   
2. var style = new GC.Spread.Sheets.Style();
   
3. style.locked = true;
   
4. style.cellButtons = [
   
5.         {
   
6.                 useButtonStyle: false,
   
7.                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
   
8.                 imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
   
9.                 imageSize: {
   
10.                         height: 15,
    
11.                         width: 15
    
12.                 },
    
13.                 enabled: false
    
14.         }
    
15. ];
    
16. var defaultStyle = new GC.Spread.Sheets.Style();
    
17. defaultStyle.locked = false;
    
18. sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
    
19. sheet.setStyle(1,1,style);
    
20. sheet.options.isProtected = true;  

复制代码

效果如下图：