这几天接触了flex的很多控件，让我印象最深刻的就是控件的数据绑定几乎所有控件都可以这样做，基本上来说原理和html一样，我自己闲暇时间就整理了有关复选框可下拉的几种用法，下面就给大家分享一下。
这里我主要研究的该控件的全选，全不选，反选以及选中的操作，原理也就是也能用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;
}
}
}
很简单吧，下面是下拉的使用，我的做法是先初始化下拉把数据绑定上去，之后根据需要修改下拉显示的内容，只需合理运用好下拉的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">
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论