纯前端控件SpreadJS教程:如何自定义工作薄背景?

转帖|使用教程|编辑:鲍佳佳|2021-04-12 10:55:22.027|阅读 14 次

概述:纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐。此示例显示如何自定义工作簿背景。

# 31款JAVA开发必备控件和工具 #

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

下载最新版SpreadJS

此示例显示如何自定义工作簿背景

你可以设置 backColor 或者 backgroundImage 选项为每一个表单设置背景色或者背景图片。如果你同时设置背景色和背景图片, 那么背景图片将会优先显示。

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));      // set the worksheet's backcolor      spread.options.backColor = 'red';      // and set the surrounding area      spread.options.grayAreaBackColor = 'gray';  

或者,您可以使用workbook的** backgroundImage **选项为工作表设置背景图像。请注意,设置背景图像会覆盖所有设置的背景颜色,因此必须将其删除才能使背景颜色生效。

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));      // Set a background image for the sheets      spread.options.backgroundImage = 'images/backImage.png';  

SpreadJS 提供控制图片布局方式的能力, 你可以设置 backgroundImageLayout 选项来完成此目标。图片布局包含以下几种类型:

  • stretch: 改变图像尺寸使其充满整个区域,无视实际的长宽比。
  • center: 图片将显示在区域的正中央。
  • zoom: 改变图像的尺寸使其适合控件尺寸,图片实际的长宽比不变。
  • none: 在显示区域中使用图像实际的尺寸显示该图像,没有任何尺寸变化。
    spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.stretch;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.zoom;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;  

你也可以设置 grayAreaBackColor 选项来设置表单灰色区域的背景色。

spread.options.grayAreaBackColor = 'gray';

本文转载自:grapecity

立即下载最新版纯前端表格控件SpreadJS体验吧!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:Grapecity

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat