Flex利用Datagrid来设置全选和单选

简介:

1,效果预览图:

2,设置一个状态位,用于checkbox的选择的,从后台获取的对象集合ArrayCollection。假如其对象为Expert,有属性mainid,tname,major,depart!有两个方法设置状态位。

2.1 在后台给expert对象增加一个属性,譬如selected,类型为boolean,这样前台设置checkbox的列就可以用这个字段了

2.2 在前台处理

 protected function getallApp_result(event:ResultEvent):void
   {
    // TODO Auto-generated method stub
    allapplist = event.result as ArrayCollection;
    //初始化全部未选择
    for(var i:int=0;i<allapplist.length;i++)
    {
     allapplist.getItemAt(i).selected=false;
    }
    
   }

这里就是在前台中加一个字段来设置

3,设置一个全局变量,来用于对标题栏上的checkbox做为状态位处理。

[Bindable]
   public var allSelectCheck:Boolean=false;
4,具体实现如下:

<mx:DataGrid id="appdg" styleName="DataGrid" width="766" height="90%"
         dataProvider="{allapplist}" 
         horizontalScrollPolicy="on" headerStyleName="myHeaderStyles" color="#393939" x="74">
      <mx:columns>
       <mx:DataGridColumn headerText="选择"  width="40" sortable="false">
        <mx:headerRenderer>
         <fx:Component>
          <mx:VBox horizontalAlign="center">
           <mx:CheckBox selected="{outerDocument.allSelectCheck}"
               click="outerDocument.selectAll(this)" />
          </mx:VBox>
         </fx:Component>
        </mx:headerRenderer>
        
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:HBox horizontalAlign="center">
           <mx:CheckBox selected="{data.selected}" 
               click="data.selected =!data.selected"/>
          </mx:HBox>
         </fx:Component> 
        </mx:itemRenderer>
       </mx:DataGridColumn>
       <mx:DataGridColumn headerText="项目编号" dataField="appid" width="150"/>
       <mx:DataGridColumn headerText="项目名称" dataField="appname" width="200"/>
       <mx:DataGridColumn headerText="申请人" dataField="apppeople" width="80"/>
       <mx:DataGridColumn headerText="申请类别" dataField="apptype" width="150"/>
      </mx:columns>    
     </mx:DataGrid>




本文转自 zhao_xiao_long 51CTO博客,原文链接:http://blog.51cto.com/computerdragon/1094389

相关文章
|
24天前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
27 2
|
4月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
137 1
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
53 0
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
75 0
|
前端开发
css3属性flex弹性布局设置三列(四列)分布样式
参考:阮一峰的网络日志 doctype html> Document body{ padding: 0; margin: 0; } .
1458 0
Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子
原文 http://blog.minidx.com/2008/11/27/1652.html 接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFill样式,交错显示LineSeries图表背景颜色。
950 0