DataGrid和AdvancedDataGrid CheckBox全选功能

更新： 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>

 

 如有有什么疑问，请发邮件[e-mail]告知我，想要源代码的请留下邮件地址。

 

评论

40 楼 lijiajia 2015-03-19  

木子佳 写道

楼主，想要源码学习，谢谢。[e-mail]

39 楼 暖暖fh 2014-12-09  

大神，我想要源码，这个功能我折腾了好我啊
[e-mail]

38 楼 挥泪杀 2013-03-22  

楼主辛苦，我也想要源码，邮箱：[e-mail]

37 楼 lizongbin 2013-02-21  

好东西，学习中，求源码，谢谢！[e-mail]

36 楼 lzj244895127 2013-01-30  

楼主！求源码！邮箱：[e-mail]

35 楼 lininto2000 2012-11-05  

[e-mail]  求源码！ 谢谢

34 楼 susoft2008 2012-10-09  

同求源码： [e-mail]

33 楼 xiahanmingqing 2012-06-24  

楼主辛苦啦，方便的话发下源码吧，[e-mail]

32 楼 cybbczs 2012-04-20  

求源代码！[e-mail]  谢谢！

31 楼 qwpnhj 2012-03-05  

[e-mail]  求源码！ 谢谢

30 楼 ydc919 2011-11-18  

辛苦了，麻烦发一下源码，谢谢[e-mail]...

29 楼 gstarwd 2011-11-17  

求源码  [e-mail]

28 楼 feelwindy520 2011-10-11  

正在学习flex，麻烦发下源码。O(∩_∩)O谢谢
[e-mail]

27 楼 michaelzero 2011-10-09  

想要源码，[e-mail] 麻烦您了...谢谢！

26 楼 Yestan 2011-08-19  

急需源码学习,能不能给个源码?谢谢![e-mail]

25 楼 ttong547785026 2011-08-18  

想学习下，[e-mail] 谢谢楼了！！！

24 楼 yunzhongxia 2011-08-11  

yuexingchen2 写道

那怎么样获得所选的那些项呢？

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

23 楼 yuexingchen2 2011-07-28  

那怎么样获得所选的那些项呢？

22 楼 木子佳 2011-07-06  

楼主，想要源码学习，谢谢。[e-mail]

21 楼 hcqenjoy 2011-04-15  

[e-mail] 请楼主发份代码 谢谢了