嵌入checkbox数据丢失问题

嵌入checkbox数据丢失问题  

 

    为了综合应用需求，将checkbox嵌入datagrid中作为一列，这个显示效果之前已经提到过，但是随之而来的是另一个问题，datagrid使用 滚动条查看数据时，checkbox的值会变化，出现很诡异的现象（多选或少选），总之不能确保勾选的是用户想要选择的记录。为了解决这个问题，在网上荡 了好些天，看了资料，还有头的帮助，最后加上小细节的纠结，今天总算解决了，也不白费加班一场。
    问题思路是新建一个mxml里面为VBox和一个CheckBox控件，并有一个共有变量，记录checkbox的选择状态；很好理解VBox作为 DataGridColumn的itemRenderer属性值，CheckBox重载了一些函数，编写其change事件，和set、get函数。再在 需要嵌入checkbox的含有datagrid的mxml中设置datagrid的属性。不多说，贴些代码辅助说明下：
（1）DGCheckBoxEditor.mxml文件
<?xml version="1.0"?>
<mx:VBox horizontalAlign="center" xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">

    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.ListData;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.FlexEvent;
       

            private var _listData:DataGridListData;               
            public var cbSelected:Boolean;           
            override public function drawFocus(draw:Boolean):void {
                chxBox.setFocus();
            }
           
            [Bindable]
            override public function set data(value:Object):void{
                super.data = value;
                chxBox.selected=data[_listData.dataField];
            }
           
            override public function get data():Object {
                return super.data;
            }           
           
               public function get listData():BaseListData
            {
                return _listData;
            }
       
            public function set listData(value:BaseListData):void
            {
                _listData = DataGridListData(value);
            }   
           
        ]]>
    </mx:Script>

    <mx:CheckBox id="chxBox" label=""
        change="cbSelected=chxBox.selected"/>
</mx:VBox>
（2）运用checbox的mxml文件中datagrid的设置：
<mx:DataGrid id="dgLayer" dataProvider="{infoAC}"  editable="true" height="120">
                        <mx:columns>
                            <mx:DataGridColumn width="50" itemRenderer="DGCheckBoxEditor" rendererIsEditor="true" editorDataField="cbSelected" textAlign="center"
                                dataField="check" headerText="选择" sortable="false">
                            </mx:DataGridColumn>
                            <mx:DataGridColumn width="60" textAlign="center" dataField="id" headerText="索引号" sortable="false" editable="false"/>
                            <mx:DataGridColumn width="240" textAlign="center" dataField="name" headerText="图层名" sortable="false" editable="false"/>
                        </mx:columns>
                    </mx:DataGrid>
（3）最后需要补充的是，DGCheckBoxEditor文件放在src的根目录下。
注：implements为隐藏属性，用于设置接口。

转载于:https://www.cnblogs.com/vmyspace/archive/2012/03/19/2405610.html