表格控件SpreadJS：如何更改整个控件外观|附完整代码-控件新闻-慧都网

表格控件SpreadJS：如何更改整个控件外观|附完整代码

转帖|使用教程|编辑：鲍佳佳|2020-09-23 15:32:53.590|阅读 334 次

概述：SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，备受苏宁易购、华为等五百强企业的青睐，本文主要讲述如何为控件自定义外观。

相关链接：

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。更多详情信息文章教程点击这里>>

点击下载SpreadJS最新试用版

设置视觉样式

您可以更改整个控件的外观。

示例代码

本示例为控件设置主题或视觉样式。

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Use Theme</title>
    <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
    <link href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet" type="text/css" />
    <script src="./scripts/gc.spread.sheets.all.13.0.0.js"></script>
    <script type="text/javascript">
        $(function () 
     {
       var spread = 
       new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
       var sheet = spread.getActiveSheet();
       $("#btn1").click(function () 
        {
          $("head").append($('<link href=
          "https://code.jquery.com/ui/1.8.12/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" 
          type="text/css" />'));
          
          setTimeout(function () 
           {   
             spread.repaint();
           }, 500);
          });
        });
    </script>
</head>
<body>
<div>
  <div id="ss" style="height: 300px; width: 50%"></div>
</div>
<input type="button" id="btn1" value="Change Theme" />
</body>
</html>

设置控件边框

示例代码

本示例使用CSS设置边框。

// 使用CSS更改边框。
.spread 
{
    border-style: solid;
    border-width: 1px;
    border-color: red;
}

今天的内容就到这了，不要忘了在评论区留下的意见和建议！现在电子表格控件SpreadJS限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询慧都在线客服>>

标签：

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

文章转载自：葡萄城

上一篇：Excel管理控件Aspose.Cells开发者指南（三十九）：取消保护工作表下一篇：IntellJ IDEA使用教程：三步解决中文乱码问题

在线采购

中文文档库

试用/Demo下载

开发社群