Wijmo5 FlexGrid教程(15)- 实现CSS设置样式功能

发布时间:2016/06/24 00:06 发布者:Alice

返回博客中心

Wijmo5的控件依赖CSS设置样式,外观和尺寸。

正因为如此,Wijmo5控件并没有类似width, height和background这样的属性。

样式和布局可以通过CSS设置。

当然如果你之前使用的是.NET,比如WinFroms和XAML,你会觉得有点奇怪。但当你学会CSS,你就会被它吸引。你也可以简单的设置样式。

控件尺寸

通过主元素可以决定控件的尺寸和位置,这个遵循HTML/CSS规范。

比如flexgrid元素的class是”grid”,然后设置300pixcel的高度限制,代码如下:

.grid {
    height: auto;
    max-height: 300px;
}

 

控件样式

我们可以通过表格内的元素来设置样式。

例如,使用grid类中的wj-cell元素就可以设置边框和白色背景。

.grid .wj-cell {
    border: none;
    background-color: #fff;
}

 

基于代码样式

除了通过CSS设置样式,也可以通过代码来做。

比如flexgrid想要设置行高,可以使用如下的代码:

// set the height of rows in the scrollable area
flex.rows.defaultSize = 34;
// set the height of rows in the column header area
flex.columnHeaders.rows.defaultSize = 40;

 

本文的示例就是基于如上的知识,对flexgrid进行CSS样式设置。效果如下:

image

设置样式的源码下载:

 

如果你对Wijmo5感兴趣,可以到如下链接下载:

/download/?pid=54

 
更多资源
 

Wijmo中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html

 

请参考Wijmo5技术文章汇总

《wijmo5 flexgrid基础教程》系列文章


关于葡萄城

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

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