更新: 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告知我,想要源代码的请留下邮件地址。