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

flex 4 s:datagird下的checkbox实现全选

    博客分类:
  • flex
阅读更多

      网上也有不少datagrid下的chexkbox全选功能的实现,但多数都要创建额外的自定义类,经过摸索此DEMO中只需定义HeadRenderer和ItemRenderer即可,而且可以很好的与grid本身的selectedItems相结合,通用性较高,代码如下:

CheckBoxHeaderRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
	
	<fx:Script>
		
		<![CDATA[
			import mx.collections.IList;
			import mx.controls.Alert;
			
			import spark.skins.spark.DefaultGridHeaderRenderer;
			protected function chkAllChangeHandler():void
			{
				if(!chkAll.selected){
					grid.selectedIndex=-1;
				}else{
					var n:int = grid.dataProvider.length;
					var arr:Array = [];
					for (var i:int = i; i < n; i++)
						arr.push(i);
					grid.selectedIndices = Vector.<int>(arr);
				}
			}
			override public function prepare(hasBeenRecycled:Boolean):void
			{
				var items:Vector.<Object> = grid.selectedItems;
				var numItems:int = items ? items.length : 0;
				chkAll.selected = grid.dataProvider.length == numItems;
				grid.addEventListener("selectionChange", selectionChangeHandler);
				grid.addEventListener("valueCommit", selectionChangeHandler);
			}
			
			override public function discard(willBeRecycled:Boolean):void
			{
				grid.removeEventListener("selectionChange", selectionChangeHandler);											
				grid.removeEventListener("valueCommit", selectionChangeHandler);											
			}
			private function selectionChangeHandler(event:Event):void
			{
				var items:Vector.<Object> = grid.selectedItems;
				var numItems:int = items ? items.length : 0;
				chkAll.selected = grid.dataProvider.length == numItems;
			}
		]]>
	</fx:Script>
	<s:CheckBox id="chkAll" horizontalCenter="0"
				verticalCenter="0" change="chkAllChangeHandler()"/>
</s:GridItemRenderer>

 CheckBoxItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true" xmlns:local="*">
	
	<fx:Script>
		<![CDATA[
			private var bool:Boolean=false;
			override public function prepare(hasBeenRecycled:Boolean):void
			{
				chk.selected = grid.selectionContainsIndex(rowIndex);
			}
			
			protected function chkMouseUpHandler(event:MouseEvent):void
			{
				if(bool){
					grid.addSelectedIndex(rowIndex);
				}else{
					grid.removeSelectedIndex(rowIndex);
				}
			}
			
			protected function chkMouseDownHandler(event:MouseEvent):void
			{
				bool=!chk.selected;
				event.stopImmediatePropagation();
			}
			
		]]>
	</fx:Script>
	<s:CheckBox id="chk" horizontalCenter="0" verticalCenter="0" mouseUp="chkMouseUpHandler(event)" mouseDown="chkMouseDownHandler(event)"/>
</s:GridItemRenderer>

 test

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<s:DataGrid x="0" y="0" width="100%" height="100%" requestedRowCount="4" selectionMode="multipleRows">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn width="30" dataField="dataField1"
							  headerRenderer="CheckBoxHeaderRenderer"
							  itemRenderer="CheckBoxItemRenderer" resizable="false" sortable="false"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="列 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="列 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="示例数据" dataField2="示例数据" dataField3="示例数据"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="数据1" dataField2="数据1" dataField3="数据1"></fx:Object>
			<fx:Object dataField1="数据2" dataField2="数据2" dataField3="数据2"></fx:Object>
			<fx:Object dataField1="数据3" dataField2="数据3" dataField3="数据3"></fx:Object>
			<fx:Object dataField1="数据4" dataField2="数据4" dataField3="数据4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

 

分享到:
评论

相关推荐

    Flex DataGird Add RadioButton

    标题“Flex DataGrid Add RadioButton”涉及的是在Adobe Flex中如何在DataGrid组件中添加单选按钮(RadioButton)的功能。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,它使用MXML和ActionScript编程语言...

    flex通过httpService读取xml数据到datagird中

    flex通过httpService读取xml数据到datagird中,通过读取远程URL的XML数据(这里保存到本地),保存到ArrayCollection中,然后在将ArrayCollection绑定到datagird上 环境:flex3.0 可直接运行

    FLEX中DATAgird的学习

    在 Flex 开发中,`DataGrid` 是一个非常重要的组件,用于展示和操作结构化的数据。在本篇文章中,我们将深入探讨如何在 `DataGrid` 中应用编辑功能,包括 `editorDataField`、`itemEditor` 和 `itemRenderer` 的使用...

    FLEX DATA GRID 分页

    下面将详细解释FLEX Data Grid的分页实现及其相关知识点。 1. **什么是Flex Data Grid**: Flex Data Grid是Adobe Flex框架中的一个组件,全称为MX:DataGrid或Spark:DataGrid。它用于展示和操作表格形式的数据,...

    datagrid全选功能控件

    Rj_datagird.swc这个文件是对源代码进行的封装,在项目中我们可以直接引用此文件即可, 唯一使用要求,必须确保提供的数据源每行中有初始化是否选择状态[状态名:isSelect] 形如:{"isSelect":false,"dataName":...

    flex支持拖拽的DataGrid

    flex支持拖拽的DataGrid,如果去查api来置一些属性将会比较麻烦,这个DataGrid可以获取拖拽的内容,这是一个application,可以直接运行

    EasyUI学习之DataGird分页显示数据

    在本文中,我们将深入探讨如何使用EasyUI的DataGird组件实现分页显示数据。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括DataGird,用于展示表格数据并支持分页、排序、筛选等功能。 首先,...

    easyui datagird增删改分页例子

    标题 "easyui datagird增删改分页例子" 提示我们这个压缩包包含一个使用EasyUI DataGrid实现数据操作和分页功能的示例。EasyUI是一个基于jQuery的前端框架,DataGrid是其组件之一,常用于展示表格数据并支持用户交互...

    wince下 datagrid 添加控件,并隐藏了

    5. **添加CheckBox控件**:CheckBox用于提供多选功能,用户可以勾选或取消勾选,从而进行批量操作。在DataGrid中,CheckBox可以放在每一行的首列,让用户选择要操作的数据项。处理CheckBox的CheckedChanged事件,...

    [DataGird]如何截取过长的字符串

    使用`MeasureString`方法来计算文本的实际尺寸,这个方法通常由.NET Framework提供,或者你可以自己实现一个基于`Graphics`对象的方法来测量。 2. **截取逻辑**: 通过计算超出的像素量以及每个字符的平均宽度来...

    可用的datagird打印类

    可用的datagird打印类。记住datagird要添加样式,调用列子如下: DataGridPrintDocument dgp=new DataGridPrintDocument(dataGrid1,"用户列表",16); //string[] uplinestr={"呵呵,hehe","xixi"}; ...

    Datagird增改删例子

    "Datagird增改删例子"这个项目旨在演示如何在C#环境下利用DataGridView实现数据的添加(Add)、修改(Edit)和删除(Delete)操作。在.NET环境中,我们可以结合数据库和ADO.NET技术来完成这些功能。 首先,`dgdemo_...

    c#.net Data导出DataGird 源码

    以下是对“c#.net Data导出DataGird源码”的详细分析。 ### 知识点一:C# .NET环境下数据导出至Excel的基本流程 #### 1. 设置HTTP响应头 在导出数据至Excel文件前,首先需设置HTTP响应头,以便浏览器能够识别该...

    DataGrid-master.zip

    4. **文件结构**:`DataGrid-master`这个文件夹很可能包含了以下几个部分: - `Assets`:存放Unity项目的所有资源,包括脚本(C#)、纹理(图片)、材质、预制体等。 - ` Scenes`:包含场景文件,定义了游戏或应用...

    Wpf DataGird示例代码

    4. **样式设计**: 为了提供丰富的用户体验,`DataGrid`的样式和模板可以根据需求定制。这包括单元格样式、行样式、头样式等。通过使用`DataTrigger`和`Binding`,可以根据数据的值动态改变样式。例如,可以设置...

    WPF链接数据库进行增删改查操作

    一个简单的数据库链接例子 在WPF界面上进行操作 实现对数据库数据的增删改查 适合初初初学者 高手不要下 也别喷我

    datagird绑定

    4. **设置`DataSource`属性**:将`DataSet`中的`DataTable`赋值给`DataGrid1`的`DataSource`属性。这一步指定了DataGrid的数据来源。 5. **设置`DataKeyField`属性**:为了确保数据的唯一性,需要指定一个主键字段...

    让datagird支持鼠标滚轮

    Datagrid控件本身可能不直接支持鼠标滚轮事件,因此开发者需要编写额外的代码来实现这一功能。`MouseLun.bas`很可能是一个Basic模块,其中包含了处理鼠标滚轮事件的自定义代码。在这个模块中,开发者可能使用了如`WM...

    WPF 分页DataGrid 分页控件的实现

    4. **事件处理**:监听ICollectionView的CurrentChanged事件,当用户切换页面时,这个事件会被触发。你可以在此事件处理器中更新DataGrid显示的内容。 ```csharp collectionView.CurrentChanged += ...

    VS2012 WPF框架 实现数据库的增删改查并用datagrids显示到窗口

    在本项目中,我们主要探讨如何使用Visual Studio 2012(VS2012)中的Windows Presentation Foundation(WPF)框架来实现一个简单的数据库应用程序,该程序具备增、删、改、查功能,并将数据实时显示在DataGrid控件上...

Global site tag (gtag.js) - Google Analytics