实现AdvancedDataGrid全选功能
2009-11-26 21:26
423 查看
AdvancedDataGrid功能强大,非常好用。遗憾的是AdvancedDataGrid对全选的支持不是很好。以下代码实现了AdvancedDataGrid的全选功能:
1. 左上角加了一个checkBox
2. 每行加了checkBox
3. 不符合条件的不能选
4. 点击全选,选中所有符合条件的记录
实现效果如下图:
实现代码如下:
1. 左上角加了一个checkBox
2. 每行加了checkBox
3. 不符合条件的不能选
4. 点击全选,选中所有符合条件的记录
实现效果如下图:
实现代码如下:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"> <!-- Author: myShareBook.cn Date: 2009-06-29 --> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; private var selectedColl:ArrayCollection = new ArrayCollection(); private function init():void{ this.myADG.expandAll(); // 扩展控件中导航树的所有节点 } // 全选,取消功能 private function selectAllCbxClick(event:Event):void{ if(selectAllCbx.selected){ // 如果全选被选中 this.selectedColl = dpFlat; // 1.选中 this.gc.refresh(); this.myADG.expandAll(); // 扩展控件中导航树的所有节点 }else{ this.selectedColl = new ArrayCollection(); // 1. 设置为取消 this.gc.refresh(); this.myADG.expandAll(); // 扩展控件中导航树的所有节点 } } // 判断某个节点是否被选中 public function hasSelected(data:Object):Boolean{ var hasSelected:Boolean = false; for each(var obj:Object in selectedColl){ if(data.Actual == obj.Actual && data.Estimate == obj.Estimate){ hasSelected = true; break; } } return hasSelected; } [Bindable] private var dpFlat:ArrayCollection = new ArrayCollection([ {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}, {Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}, {Region:"Southwest", Territory:"Nevada", Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}, {Region:"Southwest", Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, {Region:"Southwest", Territory:"Northern California", Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}, {Region:"Southwest", Territory:"Southern California", Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, {Region:"Southwest", Territory:"Southern California", Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000} ]); ]]--> </mx:Script> <mx:Panel title="AdvancedDataGrid Control Example" height="75%" width="75%" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <mx:Canvas width="100%" height="100%"> <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" initialize="gc.refresh();"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{dpFlat}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="Region"/> <mx:GroupingField name="Territory"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn> <mx:itemRenderer> <mx:Component> <mx:HBox width="100%" horizontalAlign="center"> <mx:CheckBox selected="{data.Actual > 40000 && outerDocument.hasSelected(data)}" enabled="{data.Actual > 40000}" /> <mx:Text text="{data.Region}"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:AdvancedDataGridColumn> <mx:AdvancedDataGridColumn dataField="Territory"/> <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/> <mx:AdvancedDataGridColumn dataField="Actual"/> <mx:AdvancedDataGridColumn dataField="Estimate"/> </mx:columns> </mx:AdvancedDataGrid> <!-- 全选按钮 --> <mx:CheckBox id="selectAllCbx" toolTip="Select All" click="selectAllCbxClick(event)"/> </mx:Canvas> </mx:Panel> </mx:Application>
相关文章推荐
- 周末在家闲得慌,整理了一下flex AdvancedDataGrid实现checkBox全选功能
- 实现AdvancedDataGrid全选功能
- Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能
- Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法
- Flex控件--AdvancedDataGrid实现列头过滤功能(顺便写了Button列、CheckBox列、ComboBox列等)
- EasyUI datagrid 复选框可以多选但不能全选功能实现
- ctrl a实现Flex中DataGrid或List的全选功能
- Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能
- AdvancedDataGrid每列添加复选框和图标以及全选功能
- VB.NET: DataGridView列头实现"全选"和"全不选"功能
- DataGrid 功能实现收集(转)保留做参考
- DataGrid 功能实现收集(转)保留做参考
- asp.net 中GridView控件实现全选及反选的功能
- 给DataGrid添加CheckBox列、DataGrid列头CheckBox、全选按钮实现服务器端全选
- JavaScript实现复选框的全选功能
- ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页
- zTree:实现checkbox、全选、取消全选功能
- 如何在DATAGRID中一个按钮实现全选或全不选
- js实现树形全选反选功能
- jquery实现复选框全选,反选,全不选等功能