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

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

概述: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元。点击解更多优惠

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

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:葡萄城

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
SpreadJS

面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat