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>

 

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