Flex里显示和取消DataGird里的水平与垂直网格线

http://www.flexrain.cn/flex/flex-datagrid-line.html

 

Flex里的DataGird控件的horizontalGridLines与verticalGridLines是设置数据表格里的网格线，它的属性值要么是真要么是假，这样我们通过用绑定CheckBox控件的勾选状态来显示和隐藏DataGrid里的网格线。
代码:

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3.         layout="vertical" verticalAlign="middle" 
4.         preloader="com.preload.PreLoad" 
5.         backgroundColor="0x414141"> 
6.     <!--上面preload属性与下面外部CSS可以删除它--> 
7.     <mx:Style source="yfskin/yflexskin.css"/> 
8.    
9.     <mx:Array id="arr">
10.         <mx:Object label="项目 1" data="1" />
11.         <mx:Object label="项目 2" data="2" />
12.         <mx:Object label="项目 3" data="3" />
13.         <mx:Object label="项目 4" data="4" />
14.         <mx:Object label="项目 5" data="5" />
15.         <mx:Object label="项目 6" data="6" />
16.         <mx:Object label="项目 7" data="7" />
17.         <mx:Object label="项目 8" data="8" />
18.         <mx:Object label="项目 9" data="9" />
19.         <mx:Object label="项目 10" data="10" />
20.     </mx:Array> 
21.  
22.     <mx:ArrayCollection id="arrColl" source="{arr}" /> 
23.  
24.     <mx:DataGrid id="dataGrid" 
25.             dataProvider="{arrColl}"
26.             alternatingItemColors="[white]"
27.             rowCount="6"
28.             horizontalGridLines="{hGL.selected}"
29.             verticalGridLines="{vGL.selected}"
30.             horizontalGridLineColor="#9999FF"
31.             verticalGridLineColor="#9999FF">
32.         <mx:columns>
33.             <mx:DataGridColumn id="labelCol" dataField="label" headerText="标签"/>
34.             <mx:DataGridColumn id="dataCol" dataField="data" headerText="数据"/>
35.         </mx:columns>
36.     </mx:DataGrid> 
37.  
38.     <mx:CheckBox id="hGL" label="水平网格线" selected="true" />
39.     <mx:CheckBox id="vGL" label="垂直网格线" selected="true" />
40. </mx:Application>