- 浏览: 1562068 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 12091.http://jusesgod.iteye.com/blo ... -
郁闷的查询
2011-08-03 10:19 864浪费了4个小时,只是少了一个“0” -
flex 中错误收集
2011-07-06 06:19 1056A pseudo attribute name is expe ... -
The current workspace was created by a previous version of flash builder 解决
2011-07-06 04:46 1246升级了sdk到4.5.1,每次打开总是 其实不理它,至少目前 ... -
在用Flex做项目的时候,一些小经验
2011-06-23 04:09 1289http://hi.baidu.com/interces ... -
Flex 资源收集
2011-06-23 02:20 1137http://www.adobe.com/cfusion/ex ... -
Flex printjob 相关资料收集
2011-06-18 21:36 11171.http://fengxiangpiao.iteye.co ... -
ActionScript 3 Reference 总是 retrieve data from...解决
2011-06-18 21:26 944actionscript api reference 总是 r ... -
Flex module 学习总结
2011-06-08 22:55 1235Adobe 写道 To see an example of ... -
Flex4中自定义组件的元标签
2011-06-03 23:09 3112Adobe 写道 Metadata tags in c ... -
关于flex添加音频的方法
2011-05-26 21:14 1991参考: http://bbs.airia.cn/th ... -
ActionScript组件开发
2011-05-26 10:33 1308http://sunshineyao.iteye.com/bl ... -
Flash Builder 4.5 and Flex sdk 4.5 (hero) release...
2011-05-25 11:33 1081Flex 4.5 介绍.... http://www.ado ... -
Flex ActionScript 建模工具和代码生成工具一览
2011-05-25 09:40 1763http://seantheflexguy.com/blog/ ... -
Flex数据交互方法 :httpservice, webservice, RemoteObject, socket
2011-05-24 22:12 1520http://hi.baidu.com/zhao_gw/blo ... -
终于在Google App Engine/Java(GAE/J)上成功部署运行Flex+BlazeDS
2011-05-24 15:58 2626http://www.iteye.com/topic/4283 ... -
Flex 之 郁闷 swc生成
2011-05-22 20:51 3733找了个组件....想方便日后使用...搞成swc..以后只要c ... -
Flex Time 组件相关
2011-05-21 23:28 570DateField 只能选日期,居然没有时间...日了... ... -
Cannot create class of type 'XXX'. Type 'XXX' not found.
2011-05-21 09:18 2657http://blog.csdn.net/ozzy_003/a ... -
Flex blog 收集
2011-05-20 21:27 10671.http://hi.baidu.com/luming198 ...
相关推荐
在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小部件,负责渲染每一行或每一列的数据。对于复选框,我们可以创建一个CheckBox类的实例,然后将其设置...
总结起来,实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器,通过事件监听和状态同步来达到全选的效果。在实际应用中,可能还需要处理部分选中、反选等复杂逻辑,但上述步骤提供了一...
在实际应用中,我们经常需要在DataGrid的每一行中添加复选框(checkBox),以便用户可以选择一行或多行数据进行操作。这个教程将详细解释如何在Flex的DataGrid中动态添加复选框,并通过一个名为`DataGridDemo`的示例...
在Flex开发中,数据网格(DataGrid)是用于展示数据集合的强大组件,它允许用户以表格形式查看和操作数据。本示例关注的是在DataGrid中嵌套复选框(Checkbox),并实现全选功能。这在需要用户批量选择或操作数据的...
### Flex中DataGrid某列显示值的自定义与字体颜色更改 #### 一、自定义DataGridColumn显示值 在Flex中,我们可以通过多种方式来定制DataGrid中的DataGridColumn的显示内容,例如更改显示的文本或者根据不同的条件...
### 在Flex的DataGrid中使用CheckBox #### 一、引言 在Flex应用程序开发中,DataGrid 是一种常用的UI组件,用于展示数据列表,并提供了一系列的功能,如排序、过滤等。有时,为了增加用户交互性或实现特定功能,...
在Flex编程中,DataGrid组件是用于展示数据集的...通过创建自定义列和渲染器,我们可以轻松地实现选中状态的管理,同时支持全选/全不选等高级功能。注意在实现这些功能时,同步数据模型和视图状态以及优化性能是关键。
综上所述,通过各种方式我们可以实现DataGrid的自定义列标题,包括文本、样式、交互性和动态调整列宽等特性,以满足不同场景下的需求。在实际项目中,根据具体业务逻辑和界面设计灵活运用这些方法,能够打造出更加...
通过自定义`CheckBoxColumn`、`CheckBoxHeader`和`CheckBoxRenderer`三个类,可以有效地在Flex的DataGrid中实现带有复选框列的功能,不仅增强了用户界面的交互性,也提供了更灵活的数据操作方式。这一实现充分展示了...
总之,Flex的DataGrid组件为我们提供了强大的数据展示功能,通过自定义列和事件处理,我们可以轻松地在其中嵌入复选框,实现数据的多选操作。这种技巧在许多数据交互丰富的应用程序中都十分常见。
通过以上步骤,我们就能够在Flex的DataGrid中添加了一个根据内容判断显示的按钮。这个过程涉及了组件定制、数据绑定、条件逻辑和事件处理等多个核心概念,对深入理解Flex的开发非常有帮助。在实际应用中,还可以...
4. **扩展功能**:如果需要添加额外的功能,如编辑时的验证、鼠标悬停效果等,可以在自定义类中添加相应的方法和事件处理。 5. **应用自定义列**:最后,在`DataGrid`控件中使用我们的自定义列类型。在数据绑定时,...
表头定义了 DataGrid 的列和列标题。在 MXML 中,使用 `<mx:columns>` 子标签和 `<mx:DataGridColumn>` 来定义列,比如: ```xml <mx:DataGrid id="DataGrid2" editable="true" width="300" y="30" right="10"> ...
要动态添加列,我们需要使用DataGridColumn对象。例如,如果我们要添加一个字符串类型的列,可以这样做: ```csharp DataGridTextColumn textColumn = new DataGridTextColumn(); textColumn.Header = "列名"; ...
4. **添加模板列到DataGrid** - 创建好`TemplateColumn`后,将其添加到`DataGrid`的`Columns`集合中。 - 通常在`Page_Load`事件处理程序中完成此操作,确保只在第一次加载页面时添加(避免在回发时重复添加)。 5...
根据给定的信息,本文将详细解释如何在Flex中实现DataGrid中的checkbox全选或取消功能。这涉及到Flex的checkbox管理、事件监听与处理、以及如何使用Cairngorm框架进行模型层更新等内容。 ### 一、理解Flex DataGrid...
在实际应用中,我们经常需要在DataGrid的列中添加复选框(Checkbox),以便用户能够进行多选操作,例如全选和单选。本文将深入探讨如何在Flex的DataGrid中使用复选框,并实现全选和单选功能。 首先,我们需要在...
综上所述,Flex 3中通过TitleWindow为DataGrid添加新数据的过程包括创建TitleWindow作为弹出对话框,设计表单获取用户输入,处理“添加”按钮的点击事件以将新数据添加到DataGrid的数据源,以及在主应用中触发...
在这个类中,我们可以重写或者添加方法来计算每列的总和,并将结果显示在Footer上。 2. `FooterDataGrid.as` - 这可能是一个定制的`DataGrid`类,包含了对Footer的特殊处理。在这个类中,可能会有代码用于集成...
在Flex4中,`DataGrid`的列可以通过动态创建来适应变化的数据结构,这在处理不确定列数或列类型的应用场景中非常有用。 在描述中提到,数据可能是数组类型,列名和列个数都是动态的。这意味着在运行时,我们需要...