嵌入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为隐藏属性,用于设置接口。