SpreadJS自定义风格

发布时间:2016/07/27 00:07 发布者:dexteryao

返回博客中心

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;
}

 

将列头变为红色主题。

34E0.tmp

同样我们可以通过设置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


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网