SpreadJS自定义风格 - 葡萄城技术博客

SpreadJS默认提供了多种样式风格，同时也支持Bootstrap风格。本文抛砖引玉，讲下SpreadJS如何自定义风格。

在Spread 主题学习指南中介绍到只要引用不同的css主题就可以切换SpreadJS展示风格，同样可以通过编写css文件自定义自己的主题风格。

例如下面css中的class分别对应了列头四种状态的下的样式，只要稍作更改，便可实现自己喜欢的风格。

.gc-columnHeader-normal
{
    color: #000;
    background-image: none;
    background-color: #f6dddd;
    border-style: solid;
}
.gc-columnHeader-hover
{
    color: #000;
    background-image: none;
    background-color: #f68e8e;
    border-style: solid;
}
.gc-columnHeader-selected
{
    color: #ee1313;
    background-image: none;
    background-color: #fbb4b4;
    border-style: solid;
}
.gc-columnHeader-highlight
{
    color: #ee1313;
    background-image: none;
    background-color: #fbb4b4;
    border-style: solid;
}

将列头变为红色主题。

同样我们可以通过设置SpreadJS的DefaultStyle来修改默认的style属性。

	var sheet = spread.getActiveSheet();
	sheet.defaults.colWidth = 90;
	sheet.defaults.colHeaderRowHeight = 30;
	sheet.defaults.rowHeight = 30;
	sheet.defaults.rowHeaderColWidth = 60;
	
	var defaultStyle = sheet.getDefaultStyle();
	defaultStyle.font = "22px 微软雅黑";
	sheet.setDefaultStyle(defaultStyle);

RunJS在线演示地址：http://runjs.cn/detail/almppgmr

更多资源

SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。