请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-6-24 09:54  /   查看:1601  /  回复:0
本帖最后由 Lynn.Dou 于 2021-6-28 13:48 编辑

想要给一个单元格设置背景图如何实现呢?
大家最先想到的应该是 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;  
复制代码
效果如下图:
image.png539079589.png





1.gif

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部