Flex实现查询和重置

1、设计思路

（1）下拉框选择月份，进行查询第几个月的数据；

（2）点击“重置”按钮，会将下拉框置空，同时查询全部数据；

（3）“日”和“月”交替选择，会将日期选项和月份下拉框进行屏蔽

（4）根据查询的数据不同，相应的图表显示的数据也不一致。

2、设计源码

Search.mxml：

<?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" 
			   width="100%" height="100%" 
			   creationComplete="initHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.gridHead{
			font-weight:bold;
		}
		.hbox_label{
			background-color:#CCCCCC;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			/*
			数据绑定
			*/
			[Bindable]
			private var chartGrid:ArrayCollection = new ArrayCollection([
				{Month:"一月",Mon:"256121",Tus:"784510",Wed:"445121",Thu:"212122",Fri:"935641",Sat:"323120",Sun:"653111"},
				{Month:"二月",Mon:"845445",Tus:"561222",Wed:"656412",Thu:"465412",Fri:"212312",Sat:"656566",Sun:"545121"},
				{Month:"三月",Mon:"564541",Tus:"623232",Wed:"235656",Thu:"230121",Fri:"154545",Sat:"652312",Sun:"265646"},
				{Month:"四月",Mon:"120122",Tus:"989455",Wed:"326565",Thu:"454555",Fri:"895656",Sat:"323666",Sun:"652221"},
				{Month:"五月",Mon:"623201",Tus:"265422",Wed:"484545",Thu:"565341",Fri:"859565",Sat:"451212",Sun:"564545"},
				{Month:"六月",Mon:"845445",Tus:"895654",Wed:"235656",Thu:"422120",Fri:"564212",Sat:"326565",Sun:"454552"},
				{Month:"七月",Mon:"652310",Tus:"301212",Wed:"985656",Thu:"784544",Fri:"124555",Sat:"151212",Sun:"562311"},
				{Month:"八月",Mon:"230121",Tus:"653222",Wed:"653123",Thu:"452222",Fri:"323164",Sat:"855455",Sun:"451212"},
				{Month:"九月",Mon:"452120",Tus:"745455",Wed:"840142",Thu:"546222",Fri:"565312",Sat:"745454",Sun:"402454"},
				{Month:"十月",Mon:"561212",Tus:"652312",Wed:"451220",Thu:"565323",Fri:"521212",Sat:"613221",Sun:"895654"},
				{Month:"十一月",Mon:"230120",Tus:"989565",Wed:"454555",Thu:"894545",Fri:"231545",Sat:"415412",Sun:"232332"},
				{Month:"十二月",Mon:"784545",Tus:"951221",Wed:"454212",Thu:"452122",Fri:"665322",Sat:"422200",Sun:"455465"}
			]);

			/*
			初始化函数
			*/
			protected function initHandler(event:FlexEvent):void
			{
				var tDate:Date = new Date();
				var thisYear:String = tDate.getFullYear().toString();
				var thisMonth:String = tDate.getMonth().toString();
				var thisDay:String = tDate.getDate().toString();
				var thisDate:String = thisYear + "-" + thisMonth + "-0" + thisDay;
				Alert.show("日期："+thisDate);
				column.dataProvider = chartGrid;
				grid.dataProvider = chartGrid;
				grid.rowCount = chartGrid.length + 1;
				date.enabled = true;
				drop.enabled = false;
			}

            /*
			查询函数
			*/
			protected function clickHandler(event:MouseEvent):void
			{
				var item:String = drop.selectedItem.Month;
				var arrayNew:ArrayCollection = new ArrayCollection();
				for(var i:int = 0;i<chartGrid.length;i++)
				{
					if(item == ""){
						column.dataProvider = chartGrid;
						grid.dataProvider = chartGrid;
						grid.rowCount = chartGrid.length + 1;
					}
					else if(item == chartGrid[i].Month)
					{
						arrayNew.addItem(chartGrid[i]);
					}
				}
				grid.dataProvider = arrayNew;
				grid.rowCount = arrayNew.length + 1;
				column.dataProvider = arrayNew;
			}
			
			/*
			重置函数
			*/
			protected function resetHandler(event:MouseEvent):void
			{
				//重置置空
				drop.selectedItem = "";
				//date.selectedDate = ;
				grid.dataProvider = chartGrid;
				grid.rowCount = chartGrid.length + 1;
				column.dataProvider = chartGrid;
			}

			/*
			重置函数
			*/
			protected function day_clickHandler(event:MouseEvent):void
			{
				if(day.selected){          //选择“日”
					date.enabled = true;
					drop.enabled = false;
				}
				else if(month.selected){  //选择“月”
					date.enabled = false;
					drop.enabled = true;
				}
			}

		]]>
	</fx:Script>
	
	<mx:VBox width="100%" height="100%" paddingBottom="15" paddingLeft="25" paddingRight="25" paddingTop="15">
		<mx:HBox styleName="hbox_label" width="100%" height="5%" borderStyle="solid" borderVisible="true" borderColor="0xCCCCCC" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
			<s:Label width="25"/>
			<!--日期-->
			<s:Label text="日期：" width="40" height="100%" verticalAlign="middle" fontWeight="bold"/>
			<mx:DateField id="date" formatString="YYYY-MM-DD" yearNavigationEnabled="true"/>
			<s:Label width="25"/>
			<!--月份-->
			<s:Label text="月份：" width="40" height="100%" verticalAlign="middle" fontWeight="bold"/>
			<s:DropDownList id="drop" width="80" dataProvider="{chartGrid}" labelField="Month" selectedIndex="0"/>
			<s:Label width="25"/>
			<!--日和月按钮-->
			<s:RadioButton id="day" label="日" click="day_clickHandler(event)" selected="true"/>
			<s:RadioButton id="month" label="月" click="day_clickHandler(event)"/>
			<s:Label width="25"/>
			<!--查询按钮-->
			<s:Button id="search" label="查询" click="clickHandler(event)" cornerRadius="6"/>
			<s:Label width="25"/>
			<!--重置按钮-->
			<s:Button id="reset" label="重置" click="resetHandler(event)" cornerRadius="6"/>
		</mx:HBox>
		<!--表格-->
		<mx:DataGrid id="grid" width="100%" textAlign="center" headerStyleName="gridHead" paddingBottom="5" paddingLeft="5"
					 paddingRight="5" paddingTop="5">
			<mx:columns>
				<mx:DataGridColumn headerText="月份" dataField="Month"/>
				<mx:DataGridColumn headerText="星期一" dataField="Mon"/>
				<mx:DataGridColumn headerText="星期二" dataField="Tus"/>
				<mx:DataGridColumn headerText="星期三" dataField="Wed"/>
				<mx:DataGridColumn headerText="星期四" dataField="Thu"/>
				<mx:DataGridColumn headerText="星期五" dataField="Fri"/>
				<mx:DataGridColumn headerText="星期六" dataField="Sat"/>
				<mx:DataGridColumn headerText="星期日" dataField="Sun"/>
			</mx:columns>
		</mx:DataGrid>
		<!--柱状图-->
		<mx:ColumnChart id="column" width="100%" height="50%" fontSize="16" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Month" displayName="月份"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries displayName="星期一" yField="Mon" xField="Month"/>
				<mx:ColumnSeries displayName="星期二" yField="Tus" xField="Month"/>
				<mx:ColumnSeries displayName="星期三" yField="Wed" xField="Month"/>
				<mx:ColumnSeries displayName="星期四" yField="Thu" xField="Month"/>
				<mx:ColumnSeries displayName="星期五" yField="Fri" xField="Month"/>
				<mx:ColumnSeries displayName="星期六" yField="Sat" xField="Month"/>
				<mx:ColumnSeries displayName="星期日" yField="Sun" xField="Month"/>
			</mx:series>
		</mx:ColumnChart>
		<mx:HBox width="100%">
			<s:Label width="35%"/>
			<mx:Legend dataProvider="{column}" height="25"/>
		</mx:HBox>
	</mx:VBox>
</s:Application>

3、运行结果

（1）初始化

（2）点击“查询”时

（3）点击“重置”时

（4）切换“日”和“月”