`
jie66989
  • 浏览: 254883 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

datagrid添加checkbox

    博客分类:
  • flex
 
阅读更多
参考地址:http://www.flexbj.com/post-29.html

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   creationComplete="Init()"
					   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comp="comp.*">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	
	<fx:Script>
		<![CDATA[
			
			import mx.events.ListEvent;
			import mx.controls.Alert;
			import flash.trace.Trace;   
			import comp.CheckBoxHeaderRenderer;
			import comp.CheckBoxItemRenderer;
			
			import mx.collections.ArrayCollection;   
			
			public var dataArray:ArrayCollection = new ArrayCollection;   
			private function Init():void{   
				dataArray.addItem({name:'张三',phone:'2270',email:'12@123.com'});   
				dataArray.addItem({name:'李四',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'王五',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'赵六',phone:'2270',email:'12@123.com'});
				dataArray.addItem({name:'小七',phone:'2270',email:'12@123.com'});   
				dgId.dataProvider = dataArray;   
			}   
			private function ladygaga():void{
				var arr:Array=cbc.selectItems;
				var s:String='';
				for each(var o:Object in arr)
				s+=o.name+"\t";
				Alert.show(s);
			}
			//选择某行时,同时选中checkbox
			private function selItem():void{
				var selindex:int=dgId.selectedIndex;
				var dataArr:ArrayCollection=dgId.dataProvider as ArrayCollection;
				var selectItems:Array = cbc.selectItems;
				for(var i:int=0;i<dataArr.length;i++){
					if(i==selindex){
						var obj:Object=dataArr.getItemAt(i);
						trace(obj.dgSelected);
						obj.dgSelected=!obj.dgSelected;
						trace(obj.dgSelected);
						if(obj.dgSelected)
							selectItems.push(obj);
						else{
							for(var j:int = 0; j<selectItems.length; j++){  
								if(selectItems[j] == obj){
									selectItems.splice(j,1);
								}
							}
						}
					}
				}
				dataArr.refresh();
			}
			//清除checkbox选中
			private function clearChecked():void{
				cbc.selectItems.splice(0,cbc.selectItems.length);
				var da:ArrayCollection = dgId.dataProvider as  ArrayCollection;
				for each(var obj:Object in da){
					obj.dgSelected=false;
				}
				cbc.cloumnSelected=false;
				da.refresh();
			}
			
			
		]]>
	</fx:Script>
	
	
	<mx:DataGrid id="dgId" x="10" y="10" width="450" height="200" itemClick="selItem()" fontSize="12">   
		<mx:columns>   
			<comp:CheckBoxColumn dataField="dgSelected" width="25" id="cbc" 
								 draggable="false" resizable="false" sortable="false" 
								 headerRenderer="{new ClassFactory(comp.CheckBoxHeaderRenderer)}"
								 itemRenderer="{new ClassFactory(comp.CheckBoxItemRenderer)}"/>
			<mx:DataGridColumn headerText="姓名" dataField="name"/>
			<mx:DataGridColumn headerText="电话" dataField="phone"/>
			<mx:DataGridColumn headerText="邮件" dataField="email"/>
			<mx:DataGridColumn headerText="操作" itemRenderer="comp.Operate" dataField="name"/>
			<mx:DataGridColumn headerText="操作" itemRenderer="ddd.ddd" dataField="phone"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox y="300">
		<mx:Button top="300" click="ladygaga()" label="弹出选中" fontSize="12"/>   
		<mx:Button click="clearChecked()" label="清除选中"  fontSize="12"/>
	</mx:HBox>
</s:WindowedApplication>




<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						  xmlns:s="library://ns.adobe.com/flex/spark" 
						  xmlns:mx="library://ns.adobe.com/flex/mx" 
						  focusEnabled="true">

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			protected function lblData_clickHandler(event:MouseEvent):void
			{
				Alert.show(dataGridListData.label);
			}
			
		]]>
	</fx:Script>

	<s:HGroup top="0" left="0" right="0" bottom="0" horizontalAlign="center">
		<s:Label text="删除" click="lblData_clickHandler(event)" buttonMode="true" />
	</s:HGroup>
</s:MXDataGridItemRenderer>




bug:已有选中行后,如果在点击checkbox不起作用,或者是不是想要的结果
修复:在checkboxitemrenderer的change事件中派发一个事件,通知父组件不要在触发itemclick事件
dispatchEvent(new Event(CHECKBOX_CHANGE));
addEventListener(CheckBoxItemRenderer.CHECKBOX_CHANGE, function(){
checkboxClick = true;
}, true);
private function itemClick():void{
if(checkboxClick) {
// 这里直接返回不继续执行
checkboxClick = false;
return;
}
}
分享到:
评论

相关推荐

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

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

    wpf-DataGrid-checkBox

    在这个特定的场景中,我们关注的是如何在DataGrid的表头添加一个复选框(checkbox),以实现多选功能。这在处理大量数据时非常有用,用户可以通过勾选表头的复选框来选择或取消选择所有行。 要实现这一功能,我们...

    向dataGrid中添加checkBox

    本教程将深入探讨如何在DataGrid中添加复选框(checkBox),以实现多选、单选和全选功能。这对于用户交互和数据操作来说是非常实用的,比如在表格中进行批量选择或过滤。 首先,我们需要了解DataGrid的基本结构。...

    Flex Datagrid checkbox实现

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

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

    这个场景下,用户可能需要实现一个常见的功能,即在DataGrid中添加CheckBox,允许用户进行多选操作,尤其是全选功能。这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们...

    datagrid_checkbox.zip

    在DataGridView中添加Checkbox列,可以为每一行提供一个选择状态,用户可以通过点击复选框来选择或取消选择对应的行。以下是一些关键的知识点: 1. **添加Checkbox列**: 首先,你需要在DataGridView中创建一个新的...

    flex datagrid 标题栏添加 checkbox 和 数据行 checkbox 连动

    你可以创建一个新的类,继承自MXHeaderRenderer,并在这个类中添加一个CheckBox组件。然后,你需要覆盖`updateDisplayList()`方法,以确保复选框在正确的位置显示。同时,别忘了设置这个复选框的初始状态以及它的...

    Flex DataGrid CheckBox 一个简单的全选

    在Flex的DataGrid中,我们可以为每一行添加CheckBox,这样用户就可以通过点击CheckBox来选择或取消选择特定的行。这在需要多选操作的场景中非常实用,比如用户需要批量处理某些数据。 二、设置CheckBox的默认状态 ...

    jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    有时候,为了满足特定的业务需求,在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。本文主要介绍了如何利用jQuery EasyUI设置datagrid的checkbox为禁用状态的方法。 要实现这个功能,首先需要了解EasyUI...

    flex datagrid 嵌套checkbox实现全选

    - 其次,为全选复选框添加事件监听器,比如`change`事件,当其状态改变时,遍历DataGrid的所有记录,通过`itemrenderer`中的复选框设置选中状态。 - 数据绑定可能涉及使用`selected`属性来同步复选框和数据模型的...

    WPF-DataGrid中CheckBox实现全选与非全选

    在实际应用中,我们经常需要在DataGrid中添加CheckBox,以便用户可以进行批量选择或者实现全选与非全选的功能。本文将详细讲解如何在WPF的DataGrid中实现这个功能。 首先,我们需要在XAML布局文件中为DataGrid添加...

    flex Datagrid checkbox全选

    全选功能通常通过在Datagrid的表头添加一个可点击的checkbox来实现,当用户点击这个header checkbox时,能够同步选择或取消选择所有行中的checkbox。 要实现这个功能,我们需要创建两个自定义类:一个是`...

    DataGrid和AdvancedDataGrid CheckBox全选功能

    首先,你需要在`DataGrid`或`AdvancedDataGrid`的头部分添加一个CheckBox组件。这可以通过自定义`GridHeaderRenderer`来完成,或者使用`headerRenderer`属性直接指定。 2. **监听CheckBox事件**: 当用户点击全选...

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

    在某些应用场景中,我们可能需要在DataGrid的每一行中添加CheckBox,以便用户可以进行多选操作。本文将详细探讨如何在Flex的DataGrid中实现CheckBox的全选和反选功能,以及如何防止选择状态错乱的问题。 首先,我们...

    winform DataGridView表头带CheckBox全选

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

    silverlight 5 DataGrid ColumnHeader CheckBox全选样式

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

    wince下DataGrid中添加控件

    本篇将详细介绍如何在WinCE的DataGrid中添加CheckBox和TextBox控件,这些技术对于构建功能丰富的嵌入式应用程序至关重要。 首先,了解DataGrid控件。DataGrid是.NET Compact Framework(用于WinCE平台的.NET框架)...

    WPF datagrid 表格复选框

    在这个示例中,我们关注的是如何在`DataGrid`中添加复选框,使得用户能进行多选操作。`DataGrid`的复选框功能通常用于实现全选/反选所有行的功能,提高用户交互性。 首先,我们需要理解`DataGridTemplateColumn`。...

Global site tag (gtag.js) - Google Analytics