Flex中固定DataGrid控件的横(horizontal)，竖(vertical)网格线风格的例子)网格线风格

当前位置：主页>Flex>文章内容

Flex中固定DataGrid控件的横(horizontal)，竖(vertical)网格线风格的例子)网格线风格

来源：全文检索博客作者：代码：Peter deHaan 翻译：minid 2008-04-03 【大中小】

这是一个小技巧，Flex使得自定义DataGrid控件的横(horizontal)，竖(vertical)网格线外观风格变得非常轻松。接下来的例子演示了如何将开启或者关闭DataGrid的horizontalGridLines和verticalGridLines风格，改变网格原本交互的背景颜色为白色，将horizontalGridLineColor和verticalGridLineColor设为红色。

下面用两个CheckBox来控制horizontalGridLines和verticalGridLines。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="item 1" data="1" />
<mx:Object label="item 2" data="2" />
<mx:Object label="item 3" data="3" />
<mx:Object label="item 4" data="4" />
<mx:Object label="item 5" data="5" />
<mx:Object label="item 6" data="6" />
<mx:Object label="item 7" data="7" />
<mx:Object label="item 8" data="8" />
<mx:Object label="item 9" data="9" />
<mx:Object label="item 0" data="0" />
</mx:Array>
<mx:ArrayCollection id="arrColl" source="{arr}" />
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
alternatingItemColors="[white]"
rowCount="6"
horizontalGridLines="{hGL.selected}"
verticalGridLines="{vGL.selected}"
horizontalGridLineColor="red"
verticalGridLineColor="red">
<mx:columns>
<mx:DataGridColumn id="labelCol" dataField="label" />
<mx:DataGridColumn id="dataCol" dataField="data" />
</mx:columns>
</mx:DataGrid>
<mx:CheckBox id="hGL" label="horizontalGridLines" selected="true" />
<mx:CheckBox id="vGL" label="verticalGridLines" selected="true" />
</mx:Application>

代码：Peter deHaan 翻译：minidxer

上一篇：如何获取menu当前选择项的路径下一篇：RadioButtonGroup与TileList组合使用时容易忽略的validateDisplayList方法(原创)

·AdvancedDataGrid应用-动态生成	·一套优雅天蓝风格的Flex皮肤
·Flex:3D-Album Component	·Flex Builder3 Help(CHM/PDF)下载
·PureMVC中文帮助及Tweener帮助	·一本面向Flex编程人员的书籍？
·让你的Flex MXML和AS3代码更规范	·Adobe Flex3 的中文语言参考
·利用 BlazeDS的 AMF3数据封装	·Flex3中文语言参考手册chm版