- 浏览: 58665 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
ttianyaren:
你的AdvancedDataGrid呢,不要到处抄连代码都不看 ...
flex AdvancedDataGrid实现checkbox全选 -
zengxiangshun:
<div class="quote_title ...
flex AdvancedDataGrid实现checkbox全选 -
star245:
怎么取得选中的复选框的值哦,新手求教中,,,,
flex AdvancedDataGrid实现checkbox全选 -
zdf1943:
怎么用的,求教
牛人写的50行俄罗斯方块代码(附带声音) -
citybuster_one:
very GOOD!
HP大中华区总裁孙振耀退休感言
还有几个好的例子的地址:http://www.ityangba.com/thread-126-1-1.html,可以与下面的对比参照。
--------------------------------------------------------------------
http://blog.yotuo.net/post/2009/11/DataGrid-CheckBoxColumn.html
最近在尝试着用Flex做个文件按管理的工具,在文件列表中为了操作方便,想到了再列表控件DataGird中添加一个含有复选框的列,在表头的复选框可以实现全选功能,但DataGird自身并无此功能。参照网上的相关资料,总算折腾出来了,现把源码奉上,希望对需要的朋友有点帮助,不足之处也请高手指点.
最终的CheckBoxColumn包包含四个相关的类文件,分别是:
1、CenterCheckBox.as:通过重写CheckBox基类来实现复选框的居中显示;
2、CheckBoxColumn.as:继承自DataGridColumn的一个新类,为了实现需要,增添了几个新属性;
3、CheckBoxHeaderRenderer.as:继承自CenterCheckBox 类,用于DataGrid表头的复选框,实现全选功能;
4、CheckBoxItemRenderer.as:继承自CenterCheckBox 类,用于DataGrid表中的数据行;
各文件源码如下:
1.CenterCheckBox.as
2.CheckBoxColumn.as
3.CheckBoxHeaderRenderer.as
4.CheckBoxItemRenderer.as
调用示例:
1、在mxml中作为控件调用:
2、通过代码动态调用:
PS:该组件要求在数据源中存在属性isSelected(Boolean类型,用来记录当前行是否被选中)属性,这样就限制了程序的通用性,试了很多方法都未很好解决,希望有办法解决的朋友给以指点。
示例运行效果:
for(var i:int=0; i<customerModel.managersPage.pageData.length; i++)
{
if(customerModel.managersPage.pageData[i].dgSelected.toString()=="true"){
var userV:UserVO = new UserVO();
userV.userId = customerModel.managersPage.pageData[i].userId;
result.push(userV);
}
}
customerModel.managerNewAdds = result;
你看看这个代码 应该明白了 if里面就是取你选择的值
--------------------------------------------------------------------
http://blog.yotuo.net/post/2009/11/DataGrid-CheckBoxColumn.html
最近在尝试着用Flex做个文件按管理的工具,在文件列表中为了操作方便,想到了再列表控件DataGird中添加一个含有复选框的列,在表头的复选框可以实现全选功能,但DataGird自身并无此功能。参照网上的相关资料,总算折腾出来了,现把源码奉上,希望对需要的朋友有点帮助,不足之处也请高手指点.
最终的CheckBoxColumn包包含四个相关的类文件,分别是:
1、CenterCheckBox.as:通过重写CheckBox基类来实现复选框的居中显示;
2、CheckBoxColumn.as:继承自DataGridColumn的一个新类,为了实现需要,增添了几个新属性;
3、CheckBoxHeaderRenderer.as:继承自CenterCheckBox 类,用于DataGrid表头的复选框,实现全选功能;
4、CheckBoxItemRenderer.as:继承自CenterCheckBox 类,用于DataGrid表中的数据行;
各文件源码如下:
1.CenterCheckBox.as
package checkBox.test { import flash.display.DisplayObject; import mx.controls.CheckBox; import flash.text.TextField; public class CenterCheckBox extends CheckBox { // 居中展现 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); var n:int = numChildren; for(var i:int = 0; i < n; i++) { var c:DisplayObject = getChildAt(i); if( !(c is TextField)) { c.x = Math.round((unscaledWidth - c.width) / 2); c.y = Math.round((unscaledHeight - c.height) /2 ); } } } } }
2.CheckBoxColumn.as
package checkBox.test { import mx.controls.dataGridClasses.DataGridColumn; public class CheckBoxColumn extends DataGridColumn{ public var cloumnSelected:Boolean=false;//保存该列是否全选的属性(用户先点击全选后在手动的取消几行数据的选中状态时,这里的状态不会改变) public var selectItems:Array = new Array();//用户保存用户选中的数据 public function CheckBoxColumn(columnName:String=null){ super(columnName); } } }
3.CheckBoxHeaderRenderer.as
package checkBox.test { import flash.events.Event; import mx.collections.ArrayCollection; import mx.controls.DataGrid; import checkBox.test.CenterCheckBox; import checkBox.test.CheckBoxHeaderRenderer; import checkBox.test.CheckBoxItemRenderer; import checkBox.test.CheckBoxColumn; public class CheckBoxHeaderRenderer extends CenterCheckBox{ private var _data:CheckBoxColumn;//定义CheckBox列对象 public function CheckBoxHeaderRenderer(){ super(); this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件 this.toolTip = "全选"; } override public function get data():Object{ return _data;//返回的是CheckBox列的对象 } override public function set data(value:Object):void{ _data = value as CheckBoxColumn; //trace(_data.cloumnSelected); selected = _data.cloumnSelected; } private function onChange(event:Event):void{ var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象 var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象 var dgDataArr:ArrayCollection = dg.dataProvider as ArrayCollection; column.cloumnSelected = this.selected;//更改列的全选状态 column.selectItems = new Array();//重新初始化用于保存选中列的对象 if(this.selected){//如果为全部选中的化就将数据源赋值给column.selectItems,不是就不管他,上一步已经初始化为空 column.selectItems = (dg.dataProvider as ArrayCollection).toArray(); } if(dgDataArr.length>0){ if(dgDataArr[0]!=""){ for(var i:int = 0; i < dgDataArr.length ; i++){ Object(dgDataArr[i]).dgSelected = this.selected;//更改没一行的选中状态 } } } dgDataArr.refresh();//刷新数据源,达到强制更新页面显示效果的功能,防止在使用时没有在VO类中使用绑定而出现点击全选页面没有更改状态的错误 } } }
4.CheckBoxItemRenderer.as
package checkBox.test { import flash.events.Event; import flash.events.MouseEvent; import mx.controls.CheckBox; import mx.controls.DataGrid; public class CheckBoxItemRenderer extends CenterCheckBox{ private var currentData:Object; //保存当前一行值的对象 public function CheckBoxItemRenderer(){ super(); this.addEventListener(Event.CHANGE,onClickCheckBox); this.toolTip = "选择"; } override public function set data(value:Object):void{ this.selected = value.dgSelected; this.currentData = value; //保存整行的引用 } //点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除 private function onClickCheckBox(e:Event):void{ var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象 var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象 var selectItems:Array = column.selectItems; this.currentData.dgSelected = this.selected;//根据是否选中的状态,更改数据源中选中的标记 if(this.selected){ selectItems.push(this.currentData); }else{ for(var i:int = 0; i<selectItems.length; i++){ if(selectItems[i] == this.currentData){ selectItems.splice(i,1) } } } } } }
调用示例:
1、在mxml中作为控件调用:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="Init()" horizontalAlign="center" xmlns:CheckBoxColumn ="checkBox.test.*" > <mx:Script> <![CDATA[ import checkBox.test.CenterCheckBox; import checkBox.test.CheckBoxHeaderRenderer; import checkBox.test.CheckBoxItemRenderer; import checkBox.test.CheckBoxColumn; import mx.collections.ArrayCollection; public var dataArray:ArrayCollection = new ArrayCollection; private function Init():void{ dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'}); dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'}); dgUser.dataProvider = dataArray; } ]]> </mx:Script> <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200"> <mx:columns> <CheckBoxColumn:CheckBoxColumn dataField="isSelected" width="25" draggable="false" resizable="false" sortable="false" headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}" itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}"> </CheckBoxColumn:CheckBoxColumn> <mx:DataGridColumn headerText="姓名" dataField="name"/> <mx:DataGridColumn headerText="电话" dataField="phone"/> <mx:DataGridColumn headerText="邮件" dataField="email"/> </mx:columns> </mx:DataGrid> </mx:Application>
2、通过代码动态调用:
<?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/halo" minWidth="1024" minHeight="768" creationComplete="Init()"> <fx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import Common.YotuoUpload.CheckBoxColumn.CheckBoxColumn; import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer; import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer; import mx.collections.ArrayCollection; public var dataArray:ArrayCollection = new ArrayCollection; private function Init():void{ dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'}); dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'}); dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'}); var _checkBoxCloumn:CheckBoxColumn = new CheckBoxColumn(); _checkBoxCloumn.dataField = "isSelected"; _checkBoxCloumn.headerRenderer = new ClassFactory(CheckBoxHeaderRenderer); _checkBoxCloumn.itemRenderer = new ClassFactory(CheckBoxItemRenderer); _checkBoxCloumn.width = 30; _checkBoxCloumn.sortable = false; _checkBoxCloumn.draggable = false; var _nameColumn:DataGridColumn = new DataGridColumn(); _nameColumn.headerText = "姓名"; _nameColumn.dataField = "name"; var _telColumn:DataGridColumn = new DataGridColumn(); _telColumn.headerText = "电话"; _telColumn.dataField = "phone"; var _emailColumn:DataGridColumn = new DataGridColumn(); _emailColumn.headerText = "邮件"; _emailColumn.dataField = "email"; dgUser.columns = new Array(_checkBoxCloumn,_nameColumn,_telColumn,_emailColumn); dgUser.dataProvider = dataArray; } ]]> </fx:Script> <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200" /> </s:Application>
PS:该组件要求在数据源中存在属性isSelected(Boolean类型,用来记录当前行是否被选中)属性,这样就限制了程序的通用性,试了很多方法都未很好解决,希望有办法解决的朋友给以指点。
示例运行效果:
评论
3 楼
ttianyaren
2013-10-09
你的AdvancedDataGrid呢,不要到处抄连代码都不看还说自己倒腾的
2 楼
zengxiangshun
2012-03-01
star245 写道
怎么取得选中的复选框的值哦,新手求教中,,,,
for(var i:int=0; i<customerModel.managersPage.pageData.length; i++)
{
if(customerModel.managersPage.pageData[i].dgSelected.toString()=="true"){
var userV:UserVO = new UserVO();
userV.userId = customerModel.managersPage.pageData[i].userId;
result.push(userV);
}
}
customerModel.managerNewAdds = result;
你看看这个代码 应该明白了 if里面就是取你选择的值
1 楼
star245
2012-02-18
怎么取得选中的复选框的值哦,新手求教中,,,,
发表评论
-
flex 左右左右选择器
2011-08-10 09:33 1056<?xml version="1.0" ... -
Flex报表学习网站
2011-06-24 22:14 2441Flex报表学习网站 FusionCharts for Fle ... -
Flex实例一(实现左右多选框的拖拽、点击选择,双击选择,左右互选)
2011-06-24 21:57 1821代码: <?xml version="1.0& ... -
flex控件的学习网站(收藏)
2011-06-24 15:30 1113刚开始看flex,觉得没有什么头绪,里面的控件太多,感觉无从入 ... -
Flex学习网站
2011-06-21 09:25 9841.http://www.adobe.com/devnet/f ... -
牛人写的50行俄罗斯方块代码(附带声音)
2011-06-21 08:50 1655package{ import flash.display ... -
Flex3与Flex4的区别
2011-06-20 10:04 11221. 集成Adobe Catalyst Flex ... -
Flex的MVC框架结构-Cairngorm
2011-06-20 10:02 1499Cairngorm是Flex的一个MVC框 ... -
Flex的MVC框架结构-Cairngorm
2011-06-20 09:56 1Cairngorm是Flex的一个MVC框 ... -
Flex4之DataGrid增删改同步数据库及页面数据示例总结
2011-06-20 09:51 1301有关Flex的DataGrid文章的 ... -
EventDispatcher类详解
2011-06-20 09:48 1154Evevt和EventDispatcher类在as3的事件机制 ...
相关推荐
本教程将详细讲解如何在AdvancedDataGrid中实现全选与多选功能,通过CheckBox控制数据项的选中状态。 首先,我们需要在AdvancedDataGrid的列定义中添加CheckBox控件。这可以通过创建一个自定义的CellRenderer来完成...
在本文中,我们将深入探讨如何在Flex中实现DataGrid和AdvancedDataGrid组件的CheckBox全选功能。这个功能在数据展示和交互式操作中非常常见,它允许用户通过一个主CheckBox来选择或取消选择所有行数据。 首先,我们...
在本文中,我们将深入探讨两种在Flex或Adobe AIR应用程序中常用的组件——`DataGrid`和`AdvancedDataGrid`,特别是关于它们的CheckBox全选功能。`DataGrid`和`AdvancedDataGrid`是Flex中用于展示数据集合的强大工具...
本文将详细讲解如何在Flex AdvancedDataGrid中实现带复选框的树。 1. **使用HierarchicalData对象**: 首先,我们需要创建一个HierarchicalData对象来表示树形结构的数据。HierarchicalData是Flex中用于处理树状...
表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner.png的路径 使用方法参考“示例参考.txt” ------------------------------ 目前数据源只能用...
本文将深入探讨Flex应用中的AdvancedDataGrid表头皮肤设计与实现。 AdvancedDataGrid的表头皮肤是用户界面的重要组成部分,它决定了表头的外观和交互体验。表头皮肤不仅包括了列标题的显示样式,还包括了排序指示器...
在IT行业中,AdvancedDataGrid是Flex(Adobe Flex)框架中一个强大的数据网格组件,用于显示大量结构化的数据。它提供了高级的数据呈现功能,比如分组、排序、过滤和自定义渲染。本文将深入探讨“FLEX ...
在标题“Flex Datagrid checkbox实现”中,讨论的核心是Datagrid中集成复选框(checkbox)的功能。 在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小...
`flex_AdvancedDataGrid实现checkBox全选功能`可能涉及到更复杂的用例,如分组、排序和过滤。在AdvancedDataGrid中,我们可能需要处理更多与数据提供者结构相关的细节,以确保全选/全不选逻辑的正确性。 7. **性能...
### Flex技术中AdvancedDataGrid使用方法 #### 一、多列排序 在默认情况下,`AdvancedDataGrid`组件会按照数据被添加至其`DataProvider`的顺序来展示数据。与`DataGrid`组件类似,`AdvancedDataGrid`也支持用户在...
本示例项目“Flex全选效果批量删除”聚焦于如何实现这些组件的一个实用功能,即用户可以通过全选复选框来一次性选择多个条目进行批量删除。这在数据管理界面中非常常见,能提升用户体验。 首先,`AdvancedDataGrid`...
下面我们将详细探讨如何在Flex的DataGrid中实现全选和全不选的功能。 ### 一、理解Flex DataGrid 首先,我们需要了解Flex中的DataGrid是如何工作的。DataGrid组件依赖于数据提供者(dataProvider),通常是一个 ...
最新的AdvancedDataGrid行嵌套AdvancedDataGrid实现,该例子只是实现AdvancedDataGrid利用AdvancedDataGridRendererProvider在行中渲染另外一个AdvancedDataGrid,当然也可以渲染其它任何想渲染的界面或者组件,价值...
在Flex开发环境中,AdvancedDataGrid组件是一个强大的数据展示工具,尤其适用于处理大量复杂数据的网格显示。本课件管理系统就是基于这个组件构建的,旨在提供一个基础的平台,用于管理和浏览课件信息。下面将详细...
在Flex编程领域,数据网格(DataGrid)是用于展示大量结构化数据的组件,而AdvancedDataGrid则是DataGrid的一个增强版,提供了更为丰富的功能和更高级的定制能力。本示例"flex-datagrid-advancedDataGrid-demo"显然...
本文将深入探讨如何在Flex的DataGrid中使用复选框,并实现全选和单选功能。 首先,我们需要在DataGrid的列定义中添加一个CheckBox组件。在MXML中,你可以通过以下方式创建一个包含复选框的列: ```xml 选择"> ...
import mx.controls.CheckBox; import mx.controls.Alert; import com.as3xls.xls.ExcelFile; import com.as3xls.xls.Sheet; import flash.filesystem.*; [Bindable] private var dp:Array = [ {idx:...
这个“Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button列、Checkbox列等)修正版”是针对AdvancedDataGrid的一个定制化版本,修复了之前版本中的一个问题,即CheckboxColumn无法被正确选择。 在Flex的...
例如,ComboBox列可能需要根据数据源动态填充选项,Button列可能需要打开一个弹出窗口,而Checkbox列可能需要实现全选/全不选的功能。 为了实现这些功能,你可能需要熟悉Flex的MXML和ActionScript,包括组件的声明...
这个主题涵盖了如何在Flex项目中有效地利用AdvancedDataGrid来实现数据的高级显示和操作。 1. **AdvancedDataGrid概述** AdvancedDataGrid是Adobe Flex中的一个组件,它主要用于展示结构化的数据,如表格数据。与...