程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> flex復選框和下拉列表的幾種用法整理

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

編輯:更多關於編程

    這幾天接觸了flex的很多控件,讓我印象最深刻的就是控件的數據綁定幾乎所有控件都可以這樣做,基本上來說原理和html一樣,我自己閒暇時間就整理了有關復選框可下拉的幾種用法,下面就給大家分享一下。

    1.復選框
    這裡我主要研究的該控件的全選,全不選,反選以及選中的操作,原理也就是也能用selected這個屬性,true表示選中,只需遍歷就能實現,此處我使用的是動態的復選框,頁面代碼如下

    復制代碼 代碼如下:
    <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的定義貼出來

    復制代碼 代碼如下:
    public var array:Array=new Array({"name":"語文","id":"chinese","x":"80"},{"name":"數 學","id":"math","x":"160"},{"name":"英語","id":"english","x":"240"});


    這種處理一般是用於動態的數據,靜態的就直接寫了,下面是我的ActionScript

    復制代碼 代碼如下:
    //全選
    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;
    }

    }
    }


    很簡單吧,下面是下拉的使用,我的做法是先初始化下拉把數據綁定上去,之後根據需要修改下拉顯示的內容,只需合理運用好下拉的selectedItem就可以修改下拉選中的值了

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

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

    }</PRE><BR>
    這裡我順便把數學的復選框弄成了默認選中<BR>
    看起來代碼有點亂,下面我把整個頁面代碼都貼出來<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":"語文","id":"chinese","x":"80"},{"name":"數 學","id":"math","x":"160"},{"name":"英語","id":"english","x":"240"});

    public function init(event:Event):void{


    for(var i:int=0;i<array.length;i++){
    if("數學"==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">
    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved