天天看點

Flex4 <s:DataGrid> 的用法

Flex4中的s:DataGrid與Flex3的mx:DataGrid差别非常的大,不多說,直接上代碼

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可視元素(例如服務、值對象)放在此處 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			//綁定表格用的資料	
			[Bindable]
			private var arr:ArrayCollection = new ArrayCollection([
				{neName:"教工路文一路路口相機_4", neType:"相機" , neAlarmType:"裝置告警" , removeStatus:"未清除" , confirmStatus:"未确認" , neAlarmGrade:"2級"},
				{neName:"學院路文一路路口相機_3", neType:"相機" , neAlarmType:"環境告警" , removeStatus:"未清除" , confirmStatus:"未确認" , neAlarmGrade:"3級"},
				{neName:"文一路莫幹山路路口相機_1", neType:"相機" , neAlarmType:"連接配接通信告警" , removeStatus:"未清除" , confirmStatus:"未确認" , neAlarmGrade:"1級"},
				{neName:"文一路莫幹山路路口相機_3", neType:"相機" ,  neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确認" , neAlarmGrade:"4級"}
			]);	
			
			//删除告警資訊
			public function deleteAlarmRecord():void{
				arr.removeItemAt(alarmGrid.selectedIndex);
			}
			//确認告警資訊
			public function confirmAlarmInfo():void{
				arr.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已确認";
				alarmGrid.dataProvider = arr;
			}
		]]>
	</fx:Script>
	
	<s:DataGrid id="alarmGrid" width="600" height="285" requestedRowCount="4" dataProvider="{arr}" skinClass="view.datagrid">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="neName" headerText="名稱"></s:GridColumn>
				<s:GridColumn dataField="neType" headerText="類型"></s:GridColumn>
				<s:GridColumn dataField="removeStatus" headerText="清除狀态"></s:GridColumn>
				<s:GridColumn dataField="confirmStatus" headerText="确認狀态"></s:GridColumn>
				<s:GridColumn headerText="操作">
					<s:itemRenderer>
						<fx:Component>
							<s:GridItemRenderer>
								<s:HGroup> 
									<mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/> 
									<mx:LinkButton toolTip="确認" label="确認" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/> 
								</s:HGroup>
							</s:GridItemRenderer>
						</fx:Component>
					</s:itemRenderer>
				</s:GridColumn>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	
</s:Application>