- 浏览: 1579207 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (673)
- Linux (3)
- android (302)
- php (12)
- struts2 (1)
- Flex积累 (88)
- Hibernate (8)
- MyEclipse (18)
- android备忘录 (209)
- Java备忘录 (53)
- spring (0)
- Flex备忘录 (30)
- JavaScript (10)
- Tomcat (11)
- Flex FrameWork (0)
- 设计模式学习 (4)
- 休闲娱乐 (4)
- Flex skin (1)
- Flex 组件 (2)
- 持久化相关 (2)
- DotNet相关 (5)
- Flex Style (1)
- Windows (11)
- Flex AIR (9)
- MySQL (1)
- mac OSX (29)
- eclipse (26)
- database (5)
- ARM (1)
- English (1)
- WebService (8)
- javabase64 (2)
- ruby (1)
- sqlite (5)
- ios (7)
- 无线应用 (1)
- Java (3)
- goagent (1)
- oc (1)
最新评论
-
Z_ying:
谢谢分享,上次也遇到过的,解决了,过了一段时间又忘记,幸亏看到 ...
FastJson 示例 及问题 -
wto8559:
这是什么错啊,我也遇到了.问下写一个servlet能解决什么问 ...
Exception in thread "HouseKeeper" java.lang.NullPointerException -
zxjlwt:
如何用php怎么弄了。http://surenpi.com
\U672a\U77e5\U9519\U8bef 字符还原 -
windseamless:
那怎么样才能屏蔽呢
java.lang.IllegalArgumentException: Window type can not be changed after the -
macleo:
Trinea 写道还是利用Fiddler抓包更方便,(1)无需 ...
android网络抓包相关
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.aspackage Common.YotuoUpload.CheckBoxColumn
{
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、DataGridColumn.as
package Common.YotuoUpload.CheckBoxColumn { 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 Common.YotuoUpload.CheckBoxColumn { import flash.events.Event; import mx.collections.ArrayCollection; import mx.controls.CheckBox; import mx.controls.DataGrid; 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 Common.YotuoUpload.CheckBoxColumn { 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"?> <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" xmlns:CheckBoxColumn="Common.YotuoUpload.CheckBoxColumn.*" creationComplete="Init()"> <fx:Script> <![CDATA[ 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'}); dgUser.dataProvider = dataArray; } ]]> </fx: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)}" /> <mx:DataGridColumn headerText="姓名" dataField="name"/> <mx:DataGridColumn headerText="电话" dataField="phone"/> <mx:DataGridColumn headerText="邮件" dataField="email"/> </mx:columns> </mx:DataGrid> </s: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类型,用来记录当前行是否被选中)属性,这样就限制了程序的通用性,试了很多方法都未很好解决,希望有办法解决的朋友给以指点。
示例运行效果:
发表评论
-
Flex与Struts2整合相关
2011-08-12 00:14 12611.http://jusesgod.iteye.com/blo ... -
郁闷的查询
2011-08-03 10:19 888浪费了4个小时,只是少了一个“0” -
flex 中错误收集
2011-07-06 06:19 1098A pseudo attribute name is expe ... -
The current workspace was created by a previous version of flash builder 解决
2011-07-06 04:46 1275升级了sdk到4.5.1,每次打开总是 其实不理它,至少目前 ... -
在用Flex做项目的时候,一些小经验
2011-06-23 04:09 1329http://hi.baidu.com/interces ... -
Flex 资源收集
2011-06-23 02:20 1176http://www.adobe.com/cfusion/ex ... -
Flex printjob 相关资料收集
2011-06-18 21:36 11611.http://fengxiangpiao.iteye.co ... -
ActionScript 3 Reference 总是 retrieve data from...解决
2011-06-18 21:26 960actionscript api reference 总是 r ... -
Flex module 学习总结
2011-06-08 22:55 1250Adobe 写道 To see an example of ... -
Flex4中自定义组件的元标签
2011-06-03 23:09 3132Adobe 写道 Metadata tags in c ... -
关于flex添加音频的方法
2011-05-26 21:14 2018参考: http://bbs.airia.cn/th ... -
ActionScript组件开发
2011-05-26 10:33 1338http://sunshineyao.iteye.com/bl ... -
Flash Builder 4.5 and Flex sdk 4.5 (hero) release...
2011-05-25 11:33 1130Flex 4.5 介绍.... http://www.ado ... -
Flex ActionScript 建模工具和代码生成工具一览
2011-05-25 09:40 1788http://seantheflexguy.com/blog/ ... -
Flex数据交互方法 :httpservice, webservice, RemoteObject, socket
2011-05-24 22:12 1541http://hi.baidu.com/zhao_gw/blo ... -
终于在Google App Engine/Java(GAE/J)上成功部署运行Flex+BlazeDS
2011-05-24 15:58 2666http://www.iteye.com/topic/4283 ... -
Flex 之 郁闷 swc生成
2011-05-22 20:51 3752找了个组件....想方便日后使用...搞成swc..以后只要c ... -
Flex Time 组件相关
2011-05-21 23:28 592DateField 只能选日期,居然没有时间...日了... ... -
Cannot create class of type 'XXX'. Type 'XXX' not found.
2011-05-21 09:18 2679http://blog.csdn.net/ozzy_003/a ... -
Flex blog 收集
2011-05-20 21:27 11141.http://hi.baidu.com/luming198 ...
相关推荐
总结起来,实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器,通过事件监听和状态同步来达到全选的效果。在实际应用中,可能还需要处理部分选中、反选等复杂逻辑,但上述步骤提供了一...
在实际应用中,我们经常需要在DataGrid的每一行中添加复选框(checkBox),以便用户可以选择一行或多行数据进行操作。这个教程将详细解释如何在Flex的DataGrid中动态添加复选框,并通过一个名为`DataGridDemo`的示例...
通过自定义`CheckBoxColumn`、`CheckBoxHeader`和`CheckBoxRenderer`三个类,可以有效地在Flex的DataGrid中实现带有复选框列的功能,不仅增强了用户界面的交互性,也提供了更灵活的数据操作方式。这一实现充分展示了...
总之,Flex的DataGrid组件为我们提供了强大的数据展示功能,通过自定义列和事件处理,我们可以轻松地在其中嵌入复选框,实现数据的多选操作。这种技巧在许多数据交互丰富的应用程序中都十分常见。
本教程以"ItemRendererTutorial.zip"为例,深入讲解如何在Flex中重写DataGrid的列,包括添加图片、星级评分和复选框等功能。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是Flex提供的一种机制,用于在...