主页 > 知识库 > 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;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">

标签:乐山 河南 长治 新疆 沈阳 红河 上海 沧州

巨人网络通讯声明:本文标题《flex复选框和下拉列表的几种用法整理》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266