自创AdvancedDataGrid涵盖大部分能用到的功能

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" backgroundColor="#FFFFFF">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		[Bindable]
		public var myAC:ArrayCollection = new ArrayCollection([
		{a1:"集中器",type:"0",children:[
			{a1:'采集器1',type:'1',children:[
				{type:"2",a1:"电表1",a2:"东花苑3栋4单元202",a3:"nx18021",a4:"1239",a5:"已下发",a6:1,a7:"男"}
			]},
			{a1:'采集器2',type:'1',children:[
				{type:"2",a1:"电表2",a2:"东花苑4栋2单元101",a3:"nx20021",a4:"3232",a5:"未下发",a6:1,a7:"男"},
				{type:"2",a1:"电表3",a2:"东花苑4栋2单元201",a3:"nx22021",a4:"3233",a5:"未下发",a6:2,a7:"女"},
				{type:"2",a1:"电表4",a2:"东花苑4栋2单元301",a3:"nx23021",a4:"3234",a5:"未下发",a6:3,a7:"男"},
				{type:"2",a1:"电表5",a2:"东花苑4栋2单元401",a3:"nx24021",a4:"3235",a5:"未下发",a6:2,a7:"女"},
				{type:"2",a1:"电表6",a2:"东花苑4栋2单元501",a3:"nx25021",a4:"3236",a5:"未下发",a6:3,a7:"男"},
				{type:"2",a1:"电表7",a2:"东花苑4栋2单元601",a3:"nx26021",a4:"3237",a5:"未下发",a6:4,a7:"男"},
				{type:"2",a1:"电表8",a2:"东花苑4栋2单元102",a3:"nx27021",a4:"3238",a5:"未下发",a6:1,a7:"女"},
				{type:"2",a1:"电表9",a2:"东花苑4栋2单元202",a3:"nx28021",a4:"3239",a5:"已下发",a6:5,a7:"男"}
			]},
			{type:"2",a1:"电表10",a2:"东花苑1栋1单元202",a3:"nx28028",a4:"3239",a5:"已下发",a6:1,a7:"男"}]}
		]);
		/**
		 * 设置用户双击击行后,打开、关闭子表格渲染器
		 **/ 
		private function doubleClickHandler(itemOpenEvent:MouseEvent):void
		{
			var itemObj:Object = this.adgrid.selectedItem;
			if(itemObj.a6 == null)
			{//展开树
				//设置点击打开或者关闭渲染器,
				this.adgrid.expandItem(itemObj, !this.adgrid.isItemOpen(itemObj));
			}else{//打开子节点详情事件
				Alert.show("0");
			}
		}
		/**
		 * 通过值不同改变其颜色
		 **/
		private function prorityStyleHandler(data:Object, column:AdvancedDataGridColumn):Object{
			if (data["a6"] > 3)
				return {color:0xFF0000};
			else if (data["a6"] < 2)
				return {color:0x000FF0};
			return null;
		}
		]]>
	</mx:Script>
	<mx:HierarchicalData source="{myAC}" id="myHD" />
	<mx:AdvancedDataGrid color="black" id="adgrid"
		 defaultLeafIcon="{null}" folderOpenIcon="@Embed(source='style/icon/ico (9).png')"
		 folderClosedIcon="@Embed(source='style/icon/ico (8).png')" allowMultipleSelection="true"
		 treeColumn="{treeColumn}" doubleClickEnabled="true" doubleClick="doubleClickHandler(event)"
		 variableRowHeight="true" editable="true" dataProvider="{myHD}" width="100%" height="100%" >
		<!--
		
		<mx:dataProvider>
			<mx:GroupingCollection id="gc" source="{relatedMeters}">
				<mx:grouping>
					<mx:Grouping>
						<mx:GroupingField name="a1" />
						<mx:GroupingField name="a2" />
					</mx:Grouping>
				</mx:grouping>
			</mx:GroupingCollection>
		</mx:dataProvider>
	
		-->
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn width="25" sortable="false" headerText="" />
			<mx:AdvancedDataGridColumn id="treeColumn" headerText="设备" editable="false" dataField="a1" />
			<mx:AdvancedDataGridColumn headerText="用电地址" dataField="a2" editable="false"/>
			<mx:AdvancedDataGridColumnGroup headerText="Area">
				<mx:AdvancedDataGridColumn headerText="电表编号" textAlign="right" editable="false" dataField="a3"/>
				<mx:AdvancedDataGridColumn headerText="电表地址" dataField="a4" editable="false"/>
			</mx:AdvancedDataGridColumnGroup>
			<mx:AdvancedDataGridColumn headerText="下发标志" dataField="a5"/>
			<mx:AdvancedDataGridColumn styleFunction="prorityStyleHandler" headerText="优先级" dataField="a6" editorDataField="value">
				<mx:itemEditor>
					<mx:Component>
						<mx:NumericStepper  stepSize="1" maximum="100"/>
					</mx:Component>
				</mx:itemEditor>
				<mx:formatter>
					<mx:CurrencyFormatter/>
				</mx:formatter>
			</mx:AdvancedDataGridColumn>
			<mx:AdvancedDataGridColumn headerText="性别" dataField="a7" textAlign="center" editorDataField="text" >
				<mx:itemEditor>
					<mx:Component>
						<mx:ComboBox>
							<mx:dataProvider>
								<mx:String>男</mx:String>
								<mx:String>女</mx:String>
							</mx:dataProvider>
						</mx:ComboBox>
					</mx:Component>
				</mx:itemEditor>
			</mx:AdvancedDataGridColumn>
		</mx:groupedColumns>
		
	</mx:AdvancedDataGrid>

</mx:Module>

你可能感兴趣的:(UI,Adobe)