`
xiaoer_1982
  • 浏览: 1882336 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

实现AdvancedDataGrid全选功能

阅读更多

AdvancedDataGrid功能强大,非常好用。遗憾的是AdvancedDataGrid对全选的支持不是很好。以下代码实现了AdvancedDataGrid的全选功能
1. 左上角加了一个checkBox
2. 每行加了checkBox
3. 不符合条件的不能选
4. 点击全选,选中所有符合条件的记录
抛砖引玉,希望能看到关于AdvancedDataGrid全选的更好的解决方案。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<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;
this.gc.refresh();
this.myADG.expandAll();
}else{
this.selectedColl = new ArrayCollection();
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 &amp;&amp; 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>
分享到:
评论
1 楼 hs798630734 2011-06-12  
flex AdvancedDataGrid实现checkbox全选:http://www.ityangba.com/thread-138-1-1.html

相关推荐

    flex AdvancedDataGrid实现checkBox全选功能

    接下来,我们需要实现全选功能。这通常通过在界面上添加一个全选CheckBox来完成,当用户点击这个全选CheckBox时,遍历dataProvider并改变所有数据项的选中状态: ```actionscript private function handleSelectAll...

    DataGrid和AdvancedDataGrid CheckBox全选功能

    通过以上步骤,你可以为`DataGrid`和`AdvancedDataGrid`组件实现全选功能,使用户能更方便地操作大量数据。在实际项目中,你可能还需要考虑其他因素,如多线程处理、UI响应速度以及与其他功能的集成,以提供最佳的...

    DataGrid和AdvancedDataGrid CheckBox全选功能1.1

    在本文中,我们将深入探讨如何在Flex中实现DataGrid和AdvancedDataGrid组件的CheckBox全选功能。这个功能在数据展示和交互式操作中非常常见,它允许用户通过一个主CheckBox来选择或取消选择所有行数据。 首先,我们...

    Flex 全选效果 批量删除

    本示例项目“Flex全选效果批量删除”聚焦于如何实现这些组件的一个实用功能,即用户可以通过全选复选框来一次性选择多个条目进行批量删除。这在数据管理界面中非常常见,能提升用户体验。 首先,`AdvancedDataGrid`...

    flex中dataGrid全选和全不选功能

    下面我们将详细探讨如何在Flex的DataGrid中实现全选和全不选的功能。 ### 一、理解Flex DataGrid 首先,我们需要了解Flex中的DataGrid是如何工作的。DataGrid组件依赖于数据提供者(dataProvider),通常是一个 ...

    flex advancedDataGrid 中如何实现带checkbox的树

    除了基本的复选框功能,还可以实现全选/全不选、级联选中/取消选中等高级功能。这通常需要监听AdvancedDataGrid的`itemClick`事件,根据当前选中状态来遍历数据源,更新所有相关节点的选中状态。 7. **Grouping和...

    Flex DataGrid checkBox

    `flex_AdvancedDataGrid实现checkBox全选功能`可能涉及到更复杂的用例,如分组、排序和过滤。在AdvancedDataGrid中,我们可能需要处理更多与数据提供者结构相关的细节,以确保全选/全不选逻辑的正确性。 7. **性能...

    Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button列、Checkbox列等)

    例如,ComboBox列可能需要根据数据源动态填充选项,Button列可能需要打开一个弹出窗口,而Checkbox列可能需要实现全选/全不选的功能。 为了实现这些功能,你可能需要熟悉Flex的MXML和ActionScript,包括组件的声明...

    怎样在flex的datagrid中运用checkbox

    本文将深入探讨如何在Flex的DataGrid中使用复选框,并实现全选和单选功能。 首先,我们需要在DataGrid的列定义中添加一个CheckBox组件。在MXML中,你可以通过以下方式创建一个包含复选框的列: ```xml 选择"&gt; ...

    Flex4 带checkbox的DataGrid

    表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner.png的路径 使用方法参考“示例参考.txt” ------------------------------ 目前数据源只能用...

    IT技术文章示例

    实现全选和多选功能,通常需要通过监听AdvancedDataGrid的itemClick事件,并在事件处理器中更新选择状态。 ### 8. Flex实现单元格编辑 Flex的DataGrid和其他数据展示控件都支持单元格编辑功能,这允许用户直接在...

Global site tag (gtag.js) - Google Analytics