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