`
dazhi2010
  • 浏览: 106476 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法

    博客分类:
  • Flex
阅读更多

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根目录即可无错误执行.

1
1
分享到:
评论
4 楼 dazhi2010 2013-04-23  
dsjt 写道
扩展DataGrid 即可。
效仿 DataGrid将选中状态存储到 map中。

刚学习flex,多谢提醒
3 楼 dazhi2010 2013-04-23  
jueyue 写道
其实一直想问的是,太多的绑定会不会,给系统照成负担

应该不会吧,当然了,也要看到底有多大了,呵呵,本质上就是对一个ArrayCollection的读取和写入操作而已,影不影响系统就看ArrayCollection的容量了
2 楼 jueyue 2013-04-19  
其实一直想问的是,太多的绑定会不会,给系统照成负担
1 楼 dsjt 2013-04-19  
扩展DataGrid 即可。
效仿 DataGrid将选中状态存储到 map中。

相关推荐

    DataGridView标头CheckBox全选反选

    而在这个特定的场景中,我们需要实现一个增强的功能:在`DataGridView`的列头添加一个`CheckBox`,通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见,例如在批量...

    三种方式实现checkbox全选,反选

    在实际项目中,这三种方法都可以有效地实现Checkbox全选和反选功能。选择哪种方法主要取决于项目需求、性能考虑以及开发者的偏好。对于小型项目,前两种纯JavaScript的方法足够;对于大型项目,结合服务器端处理可能...

    flex datagrid checkbox 全选/反选

    本文将基于给定的代码片段,详细解析如何在Flex中实现DataGrid的全选与反选功能。 #### 二、关键知识点 ##### 1. 自定义渲染器 为了实现全选与反选功能,首先需要创建一个自定义的渲染器类`CheckBoxRender`,继承...

    在DataGrid中使用CheckBox,实现全选功能

    这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们需要在DataGrid的列定义中添加一个CheckBox列。在WPF中,可以使用DataGridTemplateColumn来自定义列模板,将CheckBox...

    flex Datagrid checkbox全选

    总结起来,实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器,通过事件监听和状态同步来达到全选的效果。在实际应用中,可能还需要处理部分选中、反选等复杂逻辑,但上述步骤提供了一...

    flex4 list全选,反选

    在实际应用中,我们经常需要实现对列表中的所有项进行全选或反选的操作,以便用户能快速选择或取消选择全部内容。本文将详细探讨如何在Flex4的List组件上实现全选和反选功能。 首先,我们需要了解Flex4 List的基本...

    WPF CheckBox全选、反选比较通用

    本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个CheckBox并为其设置文本和初始状态: ```xml &lt;CheckBox Content="全选" x:Name=...

    flex在DataGrid中实现checkbox全选或取消

    本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能,这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中,我们通常会遇到这样的需求:当用户需要对多条记录进行批量操作时,如...

    Flex dataGrid 全选、反选

    本文将详细讨论如何在Flex DataGrid中实现全选和反选功能,并结合`checkBox`来优化这一过程。 首先,我们要理解DataGrid的结构。DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在...

    flex datagrid 嵌套checkbox实现全选

    本示例关注的是在DataGrid中嵌套复选框(Checkbox),并实现全选功能。这在需要用户批量选择或操作数据的场景中非常常见。以下是对这个主题的详细讲解: 1. **Flex DataGrid组件**: Flex DataGrid是Adobe Flex...

    Flex DataGrid CheckBox 一个简单的全选

    在Flex中,可以通过监听CheckBox的change事件,当全选CheckBox被勾选时,遍历所有行并设置其对应的CheckBox为选中状态。反之,当全选CheckBox取消选中时,将所有行的CheckBox设为未选中。这需要对DataGrid的...

    winform DataGridView表头带CheckBox全选

    在这个特定的场景中,我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`,以便实现全选和全不选的功能。这将大大提升用户体验,使得用户可以快速地对所有行进行操作,如批量删除、更新等。 首先,我们需要...

    silverlight实现datagrid全选、反选、分页、导出EXCEL

    在本文中,我们将深入探讨如何使用Silverlight技术来实现数据网格(DataGrid)的全选、反选、分页以及导出到Excel的功能。Silverlight是一种由微软开发的富客户端技术,用于创建丰富的交互式Web应用程序。 ### ...

    WPF在dataGrid中添加CheckBox支持单选,多选,全选功能

    项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。

    DataGrid和AdvancedDataGrid CheckBox全选功能

    `DataGrid`和`AdvancedDataGrid`是Flex中用于展示数据集合的强大工具,提供丰富的交互性和自定义选项。 `DataGrid`是基础版本,适合简单的数据展示,而`AdvancedDataGrid`则增加了更多的高级特性,如分层视图、多列...

    Flex Datagrid全选功能

    下面我们将详细探讨如何在Flex中实现Datagrid的全选功能。 1. **Datagrid组件**: Datagrid是Adobe Flex中的一个核心组件,用于显示二维数据,如数据表或电子表格。它可以动态地根据数据源调整大小,支持排序、过滤...

    silverlight 5 DataGrid ColumnHeader CheckBox全选样式

    最近懒 想在网上找个DataGrid ColumnHeader里面添加CheckBox全选,但是网上没找到,于是就自己写了一个这样的样式,具体功能实现你们就自己去写吧。 分享给大家。 有什么问题可以直接加WPF/Silverlight 找晴天就...

    Flex Datagrid checkbox实现

    在标题“Flex Datagrid checkbox实现”中,讨论的核心是Datagrid中集成复选框(checkbox)的功能。 在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小...

    DataGrid和AdvancedDataGrid CheckBox全选功能1.1

    在本文中,我们将深入探讨如何在Flex中实现DataGrid和AdvancedDataGrid组件的CheckBox全选功能。这个功能在数据展示和交互式操作中非常常见,它允许用户通过一个主CheckBox来选择或取消选择所有行数据。 首先,我们...

Global site tag (gtag.js) - Google Analytics