数据表格控件（DataGrid Control）的使用

一、数据表格控件的常用属性

      1、draggableColumns：是否允许通过拖放来改变列的顺序。

      2、editable：是否允许编辑表格中的内容。

      3、minColumnWidth：最小列宽。

      4、resizableColumns：是否允许通过拖动表头的网格线来改变列宽。

      5、sortableColumns：是否允许通过单击列的表头来进行排序。

      6、headerHeight：表头的高度。

      7、showHeaders：是否显示表头。

      8、editedItemPosition：当前被编辑数据项的行和列序号。

      9、editedItemRenderer：当前被编辑数据项的相关信息。

 

二、列项控件的常用属性

      1、headerText：在列表头显示的文字。

      2、headerRenderer：定义如何显示该列的表头项。默认为DataGridItemRenderer，使用文本方式显示。

      3、dataField：指定列数据来源于数据列表控件的哪个字段或属性。

      4、labelFunction：自定义方法显示该列的数据。

      5、editable：列是否可编辑。

      6、editorDataField：指明在列数据的编辑器中，保存新编辑数据的属性。默认为text属性。

      7、itemEditor：用来编辑列中数据的控件或组件，默认为TextInput控件。

      8、itemRenderer：列条目渲染器。

      9、resizable：是否允许改变列宽。

      10、sortable：是否允许排序。

      11、sortCompareFunction：自定义排序规则。如果使用labelFunction属性时，同时需要指定该方法。

      12、sortDescendin：是否以递减的顺序显示数据，默认为false。

 

三、范例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:XMLList id="users">
		<user>
			<name>张三</name>
			<sex>男</sex>
			<age>27</age>
			<phone>13700000001</phone>
		</user>
		<user>
			<name>李四</name>
			<sex>男</sex>
			<age>28</age>
			<phone>13700000002</phone>
		</user>
		<user>
			<name>王五</name>
			<sex>男</sex>
			<age>29</age>
			<phone>13700000003</phone>
		</user>
		<user>
			<name>陈六</name>
			<sex>男</sex>
			<age>31</age>
			<phone>13700000004</phone>
		</user>
		<user>
			<name>刘七</name>
			<sex>男</sex>
			<age>33</age>
			<phone>13700000005</phone>
		</user>
	</mx:XMLList>
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.ListEvent;
			private function showDetail(event:ListEvent):void{
				lblName.text = "姓名：" + event.target.selectedItem.name;
				lblSex.text = "性别：" + event.target.selectedItem.sex;
				lblAge.text = "年龄：" + event.target.selectedItem.age;
				lblPhone.text = "手机号码：" + event.target.selectedItem.phone;
			}
		]]>
	</mx:Script>
	
	<mx:Panel x="10" y="10" width="638" height="357" layout="absolute" title="数据表格控件" fontSize="12">
		<mx:DataGrid id="dg1" x="10" y="10" width="598" 
			dataProvider="{users}"
			itemClick="showDetail(event)">
			<mx:columns>
				<mx:DataGridColumn headerText="姓名" dataField="name"/>
				<mx:DataGridColumn headerText="性别" dataField="sex"/>
				<mx:DataGridColumn headerText="年龄" dataField="age"/>
				<mx:DataGridColumn headerText="手机号码" dataField="phone"/>
			</mx:columns>
		</mx:DataGrid>
		
		<mx:VBox x="10" y="186" width="400" height="119">
			<mx:Label id="lblName" width="100%"/>
			<mx:Label id="lblSex" width="100%"/>
			<mx:Label id="lblAge" width="100%"/>
			<mx:Label id="lblPhone" width="100%"/>
		</mx:VBox>
	</mx:Panel>
</mx:Application>