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

DataGrid和AdvancedDataGrid CheckBox全选功能

    博客分类:
  • flex
阅读更多

更新: http://yunzhongxia.iteye.com/blog/1145400  请下载1.1最新版本

 

先看看效果图

 

 

 

 思路如下:

 1.设置headRenderer ---> CheckBoxHeaderRenderer.mxml

 2.设置itemRenderer----->CheckBoxItemRenderer.mxml

 3.设置全选类的工具类---->ColumnUtil.as

 4.CheckBoxHeaderRenderer上的checkbox点击事件和CheckBoxItemRenderer上的checkbox点击事件。

    ColumnClickEvent.as

 

目标:

1.方法对DataGrid和AdvancedDataGrid通用。

2.点击每行的checkbox时判断列头上的checkbox是否选中。

3.点击分页后能设置列头上的checkbox选中状态。

5.dataField不能写死。网上很多例子都是写死的。

6.代码调用简单。

 

使用方法:

1.导入checkboxcolumn.swc文件。

2.在表格中加入一列

<mx:DataGridColumn id="col" dataField="isSel" />

 

注意:id和dataField属性必须写。

 

3.在表格的creationComplete方法中添加以下代码

 

ColumnUtil.getInstance().addCheckBox(col,userDg);

第一个参数是全选列对象。

第二个参数是表格对象。 

 

4.表格查询成功后,对数据源进行修改。

 

 

for(var index:int=0;index<userDb.length;index++){
      var item:Object=userDb.getItemAt(index);
      item.isSel=false;
}

 

对每个Object对象添加一个新属性isSel,注意该属性要与dataField一致。

 

5.设置列头的默认状态为未选中。

ColumnUtil.getInstance().setHeadState(userDg);

 

setHeadState方法第一个参数是表格对象。

第二个参数是列头状态的值,默认为false。

 

 

附件的table是一个简单的例子,里面含有checkboxcolumn.swc文件。

简单的调用代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
	<mx:DataGrid   id="dg" width="100%" height="100%" creationComplete="init()" dataProvider="{ac}">
		<mx:columns>
			<mx:DataGridColumn  dataField="isSel" id="col"/>
			<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Script>
		<![CDATA[
			import org.utmost.table.util.ColumnUtil;
			import mx.collections.ArrayCollection;
		    [Bindable]
		    public var ac:ArrayCollection=new ArrayCollection([
		    {isSel:false,col2:"asdas",col3:"cfd"},
		    {isSel:false,col2:"ed",col3:"fcd"},
		    {isSel:false,col2:"cds",col3:"2"},
		    {isSel:false,col2:"cdx",col3:"vv"},
		    ]);
			
			private function init():void{
				ColumnUtil.getInstance().addCheckBox(col,dg);
			}
		]]>
	</mx:Script>
</mx:Application>

 

 如有有什么疑问,请发邮件hanjingnuo@163.com告知我,想要源代码的请留下邮件地址。

 

  • 大小: 17.1 KB
  • 大小: 17.8 KB
10
3
分享到:
评论
20 楼 xj666666 2011-03-23  
楼主太厉害了。现在正好需要做这块内容。。想要个源码学习学习..谢谢xj_lzh@163.com
19 楼 fanfubao 2011-02-13  
楼主,能发个源码吗?fanfubao@163.com
18 楼 zhang_jie 2011-02-11  
楼主辛苦,我也想要源码,邮箱:zhang_xuna@yahoo.cn
17 楼 pangxin12345 2010-12-15  
楼主,checkboxcolumn.swc有源码么?  给发一下非常感谢。tjpu.helen@gmail.com
16 楼 fengzhongxiayin 2010-09-21  
你好,正学习flex,想看一下学习学习,邮箱:fengzhongxiayin@163.com
15 楼 LXJ_hmxc 2010-09-14  
楼主辛苦了  可以把源码发给我下吗? huangwei_yh@yahoo.cn 谢谢
14 楼 orangfavor 2010-09-14  
楼主辛苦了,方便地话发下源码:orangfavor@yahoo.com.cn
13 楼 yunzhongxia 2010-09-07  
guoxhvip 写道
如果我有多列都是checkbox 会出现什么效果呢?是否会所有列都选上 请楼主赐教~

实现是可以实现的,但是逻辑上存在矛盾,我还没见到过一个表格中有两个全选列的。
12 楼 lee_jl 2010-09-07  
楼主辛苦,请给我发一份源码吧,邮箱:shezhi2008@sina.com
11 楼 guoxhvip 2010-08-26  
如果我有多列都是checkbox 会出现什么效果呢?是否会所有列都选上 请楼主赐教~
10 楼 T_T小台 2010-08-20  
最近在做这个,麻烦楼主发一份源码,232469648@qq.com,谢谢。
9 楼 java_wxb 2010-08-15  
楼主厉害,现在工作需要全选功能,能不能发一份源代码给我,谢谢!E_mail:46127681@qq.com
8 楼 yuan84 2010-07-16  
楼主您好,最近正在写AdvancedDataGrid 和CheckBox的全选功能,一直没有成功,想学习下楼主的源码。Email:shuai.zhang@neusoft.com。感激不尽。
7 楼 yunzhongxia 2010-06-28  
Michaelin 写道
请问下,我在AdvancedDataGrid中使用,好像不能全选。是不是我的代码有误啊。楼主能给个例子看下吗?

原来的代码确实有问题,现在已经修改好了。
6 楼 shuaiqixiao4 2010-06-09  
楼主,就喜欢你这样开源的
5 楼 yunzhongxia 2010-06-02  
Michaelin 写道
楼主太牛了。现在正好需要做这块内容,想要源码学习学习,谢谢。yetiying@sina.com

源码已发,请查收。
4 楼 Michaelin 2010-06-02  
请问下,我在AdvancedDataGrid中使用,好像不能全选。是不是我的代码有误啊。楼主能给个例子看下吗?
3 楼 Michaelin 2010-06-02  
楼主太牛了。现在正好需要做这块内容,想要源码学习学习,谢谢。yetiying@sina.com
2 楼 yunzhongxia 2010-05-21  
源码已发,请查收
1 楼 IThanshui 2010-05-20  
楼主辛苦,向楼主要源码,邮箱ithanshui@163.com

相关推荐

    DataGrid和AdvancedDataGrid CheckBox全选功能1.1

    在本文中,我们将深入探讨如何在Flex中实现DataGrid和AdvancedDataGrid组件的CheckBox全选功能。这个功能在数据展示和交互式操作中非常常见,它允许用户通过一个主CheckBox来选择或取消选择所有行数据。 首先,我们...

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

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

    flex在DataGrid中实现checkbox全选或取消

    本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能,这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中,我们通常会遇到这样的需求:当用户需要对多条记录进行批量操作时,如...

    flex Datagrid checkbox全选

    总结起来,实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器,通过事件监听和状态同步来达到全选的效果。在实际应用中,可能还需要处理部分选中、反选等复杂逻辑,但上述步骤提供了一...

    winform DataGridView表头带CheckBox全选

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

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

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

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

    本教程将详细讲解如何在`WPF DataGrid`中实现全选和非全选功能。 首先,我们需要在`DataGrid`的列定义中添加一个复选框列,这可以通过创建一个自定义的`DataGridTemplateColumn`来实现。复选框通常绑定到每一行的...

    三种方式实现checkbox全选,反选

    在实际项目中,这三种方法都可以有效地实现Checkbox全选和反选功能。选择哪种方法主要取决于项目需求、性能考虑以及开发者的偏好。对于小型项目,前两种纯JavaScript的方法足够;对于大型项目,结合服务器端处理可能...

    WPF CheckBox全选、反选比较通用

    为了实现全选功能,我们需要监听全选CheckBox的IsChecked属性改变事件。当用户点击全选CheckBox时,所有列表项的IsSelected属性应同步更新。这可以通过后台代码实现,如: ```csharp private void SelectAll...

    flex datagrid 嵌套checkbox实现全选

    本示例关注的是在DataGrid中嵌套复选框(Checkbox),并实现全选功能。这在需要用户批量选择或操作数据的场景中非常常见。以下是对这个主题的详细讲解: 1. **Flex DataGrid组件**: Flex DataGrid是Adobe Flex...

    DataGridView标头CheckBox全选反选

    而在这个特定的场景中,我们需要实现一个增强的功能:在`DataGridView`的列头添加一个`CheckBox`,通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见,例如在批量...

    silverlight 5 DataGrid ColumnHeader CheckBox全选样式

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

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

    本文将详细探讨如何在Flex的DataGrid中实现CheckBox的全选和反选功能,以及如何防止选择状态错乱的问题。 首先,我们需要创建一个自定义的DataGrid列类,这个类将扩展mx.controls.gridClasses.GridColumn,并且包含...

    flex datagrid checkbox 全选/反选

    ### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    开源DataGrid和AdvancedDataGrid复制到Excel工具类

    标题中的“开源DataGrid和AdvancedDataGrid复制到Excel工具类”指的是一个专门设计用于将数据从Flex中的DataGrid和AdvancedDataGrid组件导出到Microsoft Excel的开源工具。这个工具类提高了用户在处理大量数据时的...

    在DataGrid中进行复选框的操作(全选和取消)

    在某些应用场景下,我们可能需要在`DataGrid`的每一行添加复选框,以便用户可以多选操作,如全选和取消全选功能。下面我们将详细探讨如何实现这一功能。 首先,我们需要在`DataGrid`中添加复选框列。这可以通过...

    Flex DataGrid CheckBox 一个简单的全选

    总的来说,这个示例旨在教会开发者如何在Flex的DataGrid中实现全选功能,并且有效地管理CheckBox的选中状态。通过对DataGrid的自定义,我们可以灵活地扩展和优化这个功能,以满足不同业务需求。同时,了解和掌握这些...

Global site tag (gtag.js) - Google Analytics