当前位置: 代码迷 >> Web前端 >> RadioButton 护持选中状态不丢失
  详细解决方案

RadioButton 护持选中状态不丢失

热度:519   发布时间:2012-11-10 10:48:51.0
RadioButton 保持选中状态不丢失
在使用RadioButton 作为DataGrid的ItemRender的时候,当数据过多滚动条出现的时候,那么在滚动条滚动的时候,上一次选中的行的选中状态会丢失。当前选中的行是不确定的。导致选中状态丢失的原因是多条数据公用一个ItemRender。比如在一个DataGride中有100条数据,列表每次最多显示5条,那么在绘制组件的时候Flex只会创建6或者7个ItemRender对象,其中的5个供5条数据使用,另外的1个或者2个只是为了性能方面考虑而创建。
  当你在滚动滚条时候,会调用RadioButton的set data() 方法,用另外的业务数据来填充着RadioButton。
    比如五条数据d1-d5,五个ItemRender i1-i5,初始化的时候是一一对应的,但当你下拉滚动条,显示d2-d6条数据的时候此时并不会重新创建一个ItemRender供d6使用,而是循环起来让他用i1的,详细的说明在下面的链接http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html。

下面的代码RadioBtnItemRender继承RadioButton,重写onChange和set data,以实现状态不丢,下面代码只是在setData的时候动态的增加一个字段_selectedFlag从而避免对业务模型的约束。
  package utils.itemrender
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.collections.ArrayCollection;
import mx.controls.Button;
import mx.controls.DataGrid;
import mx.controls.RadioButton;

public class RadioBtnItemRender extends RadioButton
{
public static const NAME:String="radioButtonGroup";
public static const FIELD:String="_selectedFlag";

private static var _firstFlag:Boolean=true;

private var _clickFunction:Function;

public function set clickFunction(_clickFunction:Function):void
{
this._clickFunction=_clickFunction;
this.addEventListener(MouseEvent.CLICK, this._clickFunction);
}

public function get clickFunction():Function
{
return this._clickFunction;
}

public function RadioBtnItemRender():void
{
super();
this.groupName=NAME;
this.addEventListener(Event.CHANGE, onChange);
}

private function onChange(event:Event):void
{
var dg:DataGrid = this.owner as DataGrid;
var collection:ArrayCollection = dg.dataProvider as ArrayCollection;
for each(var d:Object in collection){
d.selectedFlag = false;
}
this.data.selectedFlag=this.selected;
}

override public function set data(value:Object):void
{
// if(_firstFlag){
// value.selectedFlag = true;
// }
// _firstFlag = false;
if (value.hasOwnProperty("selectedFlag"))
{
this.selected=value.selectedFlag;
}
else
{
value.selectedFlag = false;
this.selected=false;
}
super.data=value;
}
}
}

在mxml文件中可以这样用:
<mx:DataGridColumn headerText="yourText" itemRenderer="{new ClassFactory(message.utils.RadioBtnItemRender)}"/>
  相关解决方案