国家  china

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

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感兴趣,可以到如下链接下载:

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

 
更多资源
 

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

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

 

请参考Wijmo5技术文章汇总

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

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/flexgrid_cssStyle.aspx

不允许评论