更新: 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>
如有有什么疑问,请发邮件[email protected]告知我,想要源代码的请留下邮件地址。