flex中datagrid checkbox全选及单选源码

flex中datagrid checkbox全选及单选源码


<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="632" height="300" showCloseButton="true">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

 public var data1:ArrayCollection = new ArrayCollection([{id:1,city:'重庆',person:5000},{id:2,city:'北京',person:8000},{id:3,city:'成都',person:52300}]);
     public var data2:ArrayCollection = new ArrayCollection();
     public var allstate:Boolean = false;
     //全选
     public function doselectAll(event:MouseEvent):void
     {
      data2.removeAll();
      allstate = event.target.selected;
       for each (var item in datagrid1.dataProvider) {
        item.selected = allstate;
        if(item.selected){
        data2.addItem(item);
        }
       }
     datagrid2.dataProvider.refresh();
     }
    //单选
    public function doselect(){
     data2.removeAll();
     for each (var item in datagrid1.dataProvider) {
        if(item.selected){
           data2.addItem(item);
        }
       
       }
    }

]]>
</mx:Script>
<!--如果表格加sortableColumns="false"属性,checkbox状态无法更新-->
<mx:DataGrid x="39" y="55" id="datagrid1" dataProvider="{data1}" width="228" >
<mx:columns>

<mx:DataGridColumn headerText="" dataField="id">
 <mx:headerRenderer>
     <mx:Component>
      <mx:HBox verticalAlign="middle">
       <mx:CheckBox toolTip="全选" selected="{outerDocument.allstate}" click="outerDocument.doselectAll(event)"/>
      </mx:HBox>
     </mx:Component>
 </mx:headerRenderer>
 <mx:itemRenderer>
   <mx:Component>
    <mx:HBox  verticalAlign="middle">
     <mx:Script>
<![CDATA[
protected function cb_change_handler(event:Event):void
{
data.selected = !data.selected; //当点击checbox时,改变checked属性状态
}
]]>
</mx:Script>
<mx:CheckBox  selected="{data.selected}" click="outerDocument.doselect()" change="cb_change_handler(event)"/>
    </mx:HBox>
   </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="编号" dataField="id"/>
<mx:DataGridColumn headerText="城市" dataField="city"/>
<mx:DataGridColumn headerText="人数" dataField="person"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="datagrid2" x="275" y="55" width="234" dataProvider="{data2}">
<mx:columns>
<mx:DataGridColumn headerText="编号" dataField="id"/>
<mx:DataGridColumn headerText="城市" dataField="city"/>
<mx:DataGridColumn headerText="人数" dataField="person"/>
</mx:columns>
</mx:DataGrid>
</mx:TitleWindow>
展开阅读全文

没有更多推荐了,返回首页