Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法
从网上搜索相关的资料绝大多数全选和反选实现方式是通过继承DataGrid和CheckBox来在子类里面实现一些方法来实现,而这些方法大多数都是对事件进行监听来实现全选反选.这种方式很好,但是个人认为很麻烦,而且如果是一个已经成型的系统要加全选反选功能的话,会变得挺复杂和麻烦.
再就是DataGrid中内嵌CheckBox的时候,如果出现滚动条,在拖动之后,之前的选择状态会变混乱,从网上找到解决方法就是把复选框的状态保存在一个数组类型的结构中.
正巧本人用到了上面两个问题的解决,如果把它们一块解决的话,会使得全选反选的方法变得很简单.
下面请看代码:
package
{
[Bindable]//此类必须是可绑定的//用于存放数据
public class DataObject
{
public var index:Number;
public var selected:Boolean = false;//存放复选框的状态
public var phone:String;
public var name:String;
}
}
上面的代码用于存放数据,值得注意的是,selected属性用来存放复选框的状态.其他的是业务数据.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1 ="com.common.*" creationComplete="application1_creationCompleteHandler(event)"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.core.UIComponent; import mx.events.DragEvent; import mx.events.FlexEvent; import mx.events.ListEvent; [Bindable] public var obj:ArrayCollection;//用于存放datagrid中的所有数据,以及所有复选框的状态 [Bindable] public var nums:String=""; protected function application1_creationCompleteHandler(event:FlexEvent):void { // TODO Auto-generated method stub var arr:ArrayCollection = new ArrayCollection(); for(var i:Number=0;i<20;i++) { var o:DataObject = new DataObject(); o.selected=false; o.index = i; o.name = "test"+(i+1); o.phone = "10010-"+(i+1); arr.addItem(o); } setData(arr); } public function setData(arr:ArrayCollection):void { if(arr.length>0) { this.obj=arr ; } } private function call():void { Alert.show(getSelectedObjects().toString()); } private function getSelectedObjects():ArrayCollection { var selectedObjects:ArrayCollection=new ArrayCollection(); if(obj.length>0) { for(var i:Number=0;i<obj.length;i++) { var o:DataObject = obj.getItemAt(i) as DataObject; if(o.selected) { selectedObjects.addItem(o.phone); } } } return selectedObjects; } protected function checkbox2_changeHandler(event:Event):void { var slc:Boolean = selectAllCheckBox.selected; if(obj.length>0) { for(var i:Number=0;i<obj.length;i++) { obj.getItemAt(i).selected=slc; } } } protected function checkbox3_changeHandler(event:Event):void { if(obj.length>0) { for(var i:Number=0;i<obj.length;i++) { obj.getItemAt(i).selected=!obj.getItemAt(i).selected; } } } ]]> </mx:Script> <mx:VBox> <mx:DataGrid id="dg" width="100%" height="300" dataProvider="{obj}"> <mx:columns> <mx:DataGridColumn width="16"> <mx:itemRenderer> <mx:Component> <mx:CheckBox selected="{data.selected}" change="checkbox1_changeHandler(event)"> <mx:Script> <![CDATA[ protected function checkbox1_changeHandler(event:Event):void {//将复选框的状态保存在obj中,防止出现复选框错乱的情况 outerDocument.obj.getItemAt(outerDocument.dg.selectedIndex).selected=event.target.selected; } ]]> </mx:Script> </mx:CheckBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="名称" dataField="name"/> <mx:DataGridColumn headerText="电话" dataField="phone"/> </mx:columns> </mx:DataGrid> <mx:HBox> <mx:CheckBox label="全选" id="selectAllCheckBox" change="checkbox2_changeHandler(event)"/> <mx:CheckBox label="反选" change="checkbox3_changeHandler(event)"/> </mx:HBox> <mx:Button label="呼叫" click="call()"/> </mx:VBox> </mx:Application>
第二段代码是使用方式,可以直接运行的,放在自己的flash builder中一运行就明白了.
注意:obj用于存放datagrid中的所有数据,以及所有复选框的状态,作为datagrid的dataProvider传入其中.
而在复选框内设置它的选中状态属性为selected="{data.selected}",则可以使它的状态与obj中的相应数据对象的selected属性相对应.
如此便可以防止在出现滚动条拖动的时候复选框状态变乱的问题了.
而且,要实现全选反选等操作也就变成了对obj进行的操作了,而不是直接对CheckBox进行操作,会容易许多,不再详述,请查看代码.
附源代码,放到src根目录即可无错误执行.
相关推荐
重写DataGridView,在标头添加复选框,实现列中的复选框全选和反选
最经典的datagrid全选/反选控件,自定义渲染类,带有使用说明。如果不明白可随时联系
flex Datagrid checkbox全选 Datagrid
Flex dataGrid 全选、反选 checkBox 不是很完善,但很有借鉴意义
成功的实现了,datagrid中嵌套checkbox实现全选的功能。分享代码供大家分享。项目为flex3。
NULL 博文链接:https://taomujian.iteye.com/blog/294748
WPF 实现CheckBox全选、反选功能,界面简单实用,功能代码可以很好地套用到自己的项目,希望对有需要的小伙伴有帮助。
NULL 博文链接:https://tony0101.iteye.com/blog/579404
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
最近懒 想在网上找个DataGrid ColumnHeader里面添加CheckBox全选,但是网上没找到,于是就自己写了一个这样的样式,具体功能实现你们就自己去写吧。 分享给大家。 有什么问题可以直接加WPF/Silverlight 找晴天就...
在DataGrid中实现了 简单的全选与非全选。
主要写了一个全选列,功能包括设置选择框的默认选择状态, 默认可用状态, 全选以及快速获取选中的值,呵呵!
项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。
表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner.png的路径 使用方法参考“示例参考.txt” ------------------------------ 目前数据源只能用...
Flex中,给Datagrid加全选功能。
Flex的DataGrid中使用CheckBox. 大家共同研究
可以通过简单的一个标签实现一个表的checkbox功能,当然我才学了不到一个星期,可以在原来的基础上进行扩展,希望交流下我的邮箱是llaysz@163.com,如果大家把它变强大了记得给我发一份谢谢了
Wpf datagrid 多选、单选、反选(单选一次选中,无需点两次)
NULL 博文链接:https://yunzhongxia.iteye.com/blog/652902