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)切换“日”和“月”