• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    flex复选框和下拉列表的几种用法整理
    POST TIME:2021-10-18 08:40
    这几天接触了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;iarray.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;iarray.length;i++){
    checkbox[i].selected=false;
    }
    }
    //反选
    private function reverse():void{

    for(var i:int=0;iarray.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;iarray.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;iarray.length;i++){
    if("数学"==array[i].name){

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

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

    for(var i:int=0;iarray.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;iarray.length;i++){
    checkbox[i].selected=false;
    }
    }
    //反选
    private function reverse():void{

    for(var i:int=0;iarray.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">
    上一篇:如何在Renderer中设置属性 Renderer中设置属性的方法实例
    下一篇:Flex中实现对一个text渲染不同的字体颜色示例
  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信