快捷導(dǎo)航

flex復(fù)選框和下拉列表的幾種用法整理

更新時(shí)間：2013年07月08日 17:43:20 作者：

自己閑暇時(shí)間整理了有關(guān)復(fù)選框可下拉的幾種用法，在這里與大家分享下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

這幾天接觸了flex的很多控件，讓我印象最深刻的就是控件的數(shù)據(jù)綁定幾乎所有控件都可以這樣做，基本上來(lái)說(shuō)原理和html一樣，我自己閑暇時(shí)間就整理了有關(guān)復(fù)選框可下拉的幾種用法，下面就給大家分享一下。

1.復(fù)選框
這里我主要研究的該控件的全選，全不選，反選以及選中的操作，原理也就是也能用selected這個(gè)屬性，true表示選中，只需遍歷就能實(shí)現(xiàn)，此處我使用的是動(dòng)態(tài)的復(fù)選框，頁(yè)面代碼如下

復(fù)制代碼代碼如下:

 
<mx:VBox top="50"> 
<mx:VBox> 
<mx:Canvas width="100%" height="100%" > 
<mx:Repeater id="rep" dataProvider="{array}"> 
<mx:CheckBox id="checkbox" label="{rep.currentItem.name}" x="{rep.currentItem.x}" data="{rep.currentItem.id}"/> 
</mx:Repeater> 
</mx:Canvas> 
</mx:VBox> 
<mx:VBox> 
</mx:VBox> 
</mx:VBox> 
<s:Button x="90" y="81" label="全選" click="checkAll()"/> 
<s:Button x="168" y="81" label="全不選" click="checkNotAll()"/> 
<s:Button x="246" y="81" label="反選" click="reverse()"/> 

剛看到可能比較陌生下面我把Array的定義貼出來(lái)

復(fù)制代碼代碼如下:

 
public var array:Array=new Array({"name":"語(yǔ)文","id":"chinese","x":"80"},{"name":"數(shù)學(xué)","id":"math","x":"160"},{"name":"英語(yǔ)","id":"english","x":"240"}); 

這種處理一般是用于動(dòng)態(tài)的數(shù)據(jù)，靜態(tài)的就直接寫了，下面是我的ActionScript

復(fù)制代碼代碼如下:

 
//全選 
private function checkAll():void{ 

for(var i:int=0;i<array.length;i++){ 
checkbox[i].selected=true; 

all=all+checkbox[i].data+","; 
} 
Alert.show("選擇了："+all.substr(0,all.lastIndexOf(","))); 
all=""; 
} 
//全不選 
private function checkNotAll():void{ 

for(var i:int=0;i<array.length;i++){ 
checkbox[i].selected=false; 
} 
} 
//反選 
private function reverse():void{ 

for(var i:int=0;i<array.length;i++){ 
if(checkbox[i].selected){ 
checkbox[i].selected=false; 
}else{ 
checkbox[i].selected=true; 
} 

} 
} 

很簡(jiǎn)單吧，下面是下拉的使用，我的做法是先初始化下拉把數(shù)據(jù)綁定上去，之后根據(jù)需要修改下拉顯示的內(nèi)容，只需合理運(yùn)用好下拉的selectedItem就可以修改下拉選中的值了

復(fù)制代碼代碼如下:

 
<mx:ComboBox id="subject" x="78" y="149" labelField="name" dataProvider="{array}"/> 
下面是頁(yè)面加載的初始化方法 
<PRE class=java name="code">public function init(event:Event):void{ 
for(var i:int=0;i<array.length;i++){ 
if("數(shù)學(xué)"==array[i].name){ 

subject.selectedIndex=i; 
checkbox[i].selected=true; 
} 
} 

}</PRE><BR> 
這里我順便把數(shù)學(xué)的復(fù)選框弄成了默認(rèn)選中<BR> 
看起來(lái)代碼有點(diǎn)亂，下面我把整個(gè)頁(yè)面代碼都貼出來(lái)<BR> 
<PRE class=html name="code"><?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" initialize="init(event)"> 
<fx:Declarations> 
<!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 
<fx:Script> 
<![CDATA[ 
import mx.controls.Alert; 
public var all:String=""; 

public var array:Array=new Array({"name":"語(yǔ)文","id":"chinese","x":"80"},{"name":"數(shù)學(xué)","id":"math","x":"160"},{"name":"英語(yǔ)","id":"english","x":"240"}); 

public function init(event:Event):void{ 


for(var i:int=0;i<array.length;i++){ 
if("數(shù)學(xué)"==array[i].name){ 

subject.selectedIndex=i; 
checkbox[i].selected=true; 
} 
} 

} 
//全選 
private function checkAll():void{ 

for(var i:int=0;i<array.length;i++){ 
checkbox[i].selected=true; 

all=all+checkbox[i].data+","; 
} 
Alert.show("選擇了："+all.substr(0,all.lastIndexOf(","))); 
all=""; 
} 
//全不選 
private function checkNotAll():void{ 

for(var i:int=0;i<array.length;i++){ 
checkbox[i].selected=false; 
} 
} 
//反選 
private function reverse():void{ 

for(var i:int=0;i<array.length;i++){ 
if(checkbox[i].selected){ 
checkbox[i].selected=false; 
}else{ 
checkbox[i].selected=true; 
} 

} 
} 
]]> 
</fx:Script> 
<mx:VBox top="50"> 
<mx:VBox> 
<mx:Canvas width="100%" height="100%" > 
<mx:Repeater id="rep" dataProvider="{array}"> 
<mx:CheckBox id="checkbox" label="{rep.currentItem.name}" x="{rep.currentItem.x}" data="{rep.currentItem.id}"/> 
</mx:Repeater> 
</mx:Canvas> 
</mx:VBox> 
<mx:VBox> 
</mx:VBox> 
</mx:VBox> 
<s:Button x="90" y="81" label="全選" click="checkAll()"/> 
<s:Button x="168" y="81" label="全不選" click="checkNotAll()"/> 
<s:Button x="246" y="81" label="反選" click="reverse()"/> 
<mx:ComboBox id="subject" x="78" y="149" labelField="name" dataProvider="{array}"/> 

</s:Application> 
</PRE><BR> 
<BR> 
<PRE></PRE> 
<P></P> 
<PRE></PRE> 
<IMG alt="" src="http://img.blog.csdn.net/20130706214231250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbndpbGwz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"> 