Flex中用CheckBox作为DataGrideItemRender状态丢失的解决方法

网上资料：http://tech.it168.com/a2009/0714/605/000000605963.shtml

 

参考上述资料，不过可惜他的代码直接拷出来不能运行。先把他的代码“翻译”一下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> import mx.controls.Alert; import mx.collections.ArrayCollection; import mx.controls.CheckBox; private var d:ArrayCollection; [Bindable] private var dpFlat:ArrayCollection = new ArrayCollection([ {id:"1", v:"false", label:"没选中"}, {id:"2", v:"false", label:"没选中"}, {id:"3", v:"false", label:"没选中"}, {id:"4", v:"false", label:"没选中"}, {id:"5", v:"false", label:"没选中"}, {id:"6", v:"false", label:"没选中"}, {id:"7", v:"false", label:"没选中"}, {id:"8", v:"false", label:"没选中"}, {id:"9", v:"false", label:"没选中"}, {id:"10", v:"false", label:"没选中"} ]); private function init():void { Alert.show(Math.ceil(3.1).toString()); // Alert.show("0"); // d = new ArrayCollection(); // var aa : Array = new Array(); // aa.id = "1"; // aa.v = "true"; // aa.label = "选中"; // d.addItem(aa); // // aa.id = "2"; // aa.v = "true"; // aa.label = "选中"; // d.addItem(aa); // // aa.id = "3"; // aa.v = "true"; // aa.label = "选中"; // d.addItem(aa); // // aa.id = "4"; // aa.v = "true"; // aa.label = "选中"; // d.addItem(aa); // dg.dataProvider = dpFlat; // // Alert.show("-1"); //this.addEventListener("CHANGE_STATE_EVENT",changeStateEventHandler); } // private function changeStateEventHandler(evt:Event):void { // // evt.stopImmediatePropagation(); // // var cb:CheckBox = evt.target as CheckBox; // cb.selected = true; // // //Alert.show(dg.selectedItem.id.toString()); var index:int = d.getItemIndex(dg.selectedItem); Alert.show(index.toString()); var id:String = dg.selectedItem.id.toString(); if(cb.selected){ Alert.show("1"); } if(!cb.selected){ Alert.show("2"); } // //d.removeItemAt(index); // //d.addItemAt(xml,index); // } </mx:Script> <mx:DataGrid x="112" y="94" width="376" height="180" id="dg"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="id"/> <mx:DataGridColumn headerText="Column 2" dataField="v" itemRenderer="Render"/> <mx:DataGridColumn headerText="Column 3" dataField="label"/> </mx:columns> <mx:Script> // override protected function scrollHandler(event:Event):void { // } </mx:Script> </mx:DataGrid> </mx:Application>

Render.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" click="test(event)"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; override public function get data():Object { return super.data; } override public function set data(value:Object):void { super.data = value; if(value.v == "true"){ this.selected = true; }else if(value.v == "false"){ this.selected = false; } } // private function changeHandler():void { // //dispatchEvent(new Event("CHANGE_STATE_EVENT",true,false)); // } private function test(evt:Event) : void { var cb:CheckBox = evt.target as CheckBox; var selected : Boolean = cb.selected; if(selected) { cb.data.v = "true"; cb.data.label = "选中"; } else { cb.data.v = "false"; cb.data.label = "没选中"; } } ]]--> </mx:Script> </mx:CheckBox>

 

于是我就想出了解决方案：

例如：

...... <mx:AdvancedDataGrid width="100%" height="200" id="initDa" doubleClick="naviToDetail()" doubleClickEnabled="true" horizontalScrollPolicy="auto" headerWordWrap="true" wordWrap="true" sortExpertMode="true"> <mx:columns> <mx:AdvancedDataGridColumn width="30" paddingLeft="5" sortable="false" headerText="" dataField="grsDataSelected"> <mx:itemRenderer> <mx:Component> <mx:CheckBox click="outerDocument.ChooseItem(event)"> <mx:Script> <!--[CDATA[ override public function get data():Object { return super.data; } override public function set data(value:Object):void { super.data = value; if(data != null) { if(data.grsDataSelected == "true"){ this.selected = true; }else if(value.grsDataSelected == "false"){ this.selected = false; } } } ]]--> </mx:Script> </mx:CheckBox> </mx:Component> </mx:itemRenderer> </mx:AdvancedDataGridColumn> <mx:AdvancedDataGridColumn width="125" textAlign="center" headerText="AAAAAAA" dataField="grsDataRegistDateTime"/> <mx:AdvancedDataGridColumn width="50" textAlign="center" headerText="BBBBBBB" dataField="grdDataImportant"/> <mx:AdvancedDataGridColumn width="50" textAlign="center" headerText="CCCCCCC" dataField="grdDataTenpu"/> <mx:AdvancedDataGridColumn width="485" textAlign="left" headerText="DDDDDDDD" dataField="grdDataTitle"/> <mx:AdvancedDataGridColumn width="125" textAlign="left" headerText="EEEEEEE" dataField="grsDataRegistUser"/> <mx:AdvancedDataGridColumn width="50" textAlign="center" headerText="FFFFFFFF" dataField="grsDataShubetsu"/> </mx:columns> </mx:AdvancedDataGrid> ......

通过覆盖CheckBox的override public function set data(value:Object):void方法实现重置选中与否的状态。

前提是需要在CheckBox的dataProvider中追加一个字段(例如：grsDataSelected)。当选中CheckBox时触发ChooseItem函数。

public var datas : Array = new Array(); public function ChooseItem(evt:Event) : void { var cbx:CheckBox = evt.target as CheckBox; var sid : String = cbx.data.tpc_msg_no; var selected : Boolean = cbx.selected; if(selected) { cbx.data.grsDataSelected = "true"; datas.push(sid); } else { cbx.data.grsDataSelected = "false"; for(var i : int=0; i < datas.length; i++) { if(datas[i] == sid) { datas.splice(i,1); } } } }

 

mx:List同样也有这种现象：http://leopowerword.javaeye.com/blog/443016