datagrid添加checkbox

参考地址:http://www.flexbj.com/post-29.html


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="Init()"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comp="comp.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>


<fx:Script>
<![CDATA[

import mx.events.ListEvent;
import mx.controls.Alert;
import flash.trace.Trace;
import comp.CheckBoxHeaderRenderer;
import comp.CheckBoxItemRenderer;

import mx.collections.ArrayCollection;

public var dataArray:ArrayCollection = new ArrayCollection;
private function Init():void{
dataArray.addItem({name:'张三',phone:'2270',email:'12@123.com'});
dataArray.addItem({name:'李四',phone:'2270',email:'12@123.com'});
dataArray.addItem({name:'王五',phone:'2270',email:'12@123.com'});
dataArray.addItem({name:'赵六',phone:'2270',email:'12@123.com'});
dataArray.addItem({name:'小七',phone:'2270',email:'12@123.com'});
dgId.dataProvider = dataArray;
}
private function ladygaga():void{
var arr:Array=cbc.selectItems;
var s:String='';
for each(var o:Object in arr)
s+=o.name+"\t";
Alert.show(s);
}
//选择某行时,同时选中checkbox
private function selItem():void{
var selindex:int=dgId.selectedIndex;
var dataArr:ArrayCollection=dgId.dataProvider as ArrayCollection;
var selectItems:Array = cbc.selectItems;
for(var i:int=0;i<dataArr.length;i++){
if(i==selindex){
var obj:Object=dataArr.getItemAt(i);
trace(obj.dgSelected);
obj.dgSelected=!obj.dgSelected;
trace(obj.dgSelected);
if(obj.dgSelected)
selectItems.push(obj);
else{
for(var j:int = 0; j<selectItems.length; j++){
if(selectItems[j] == obj){
selectItems.splice(j,1);
}
}
}
}
}
dataArr.refresh();
}
//清除checkbox选中
private function clearChecked():void{
cbc.selectItems.splice(0,cbc.selectItems.length);
var da:ArrayCollection = dgId.dataProvider as ArrayCollection;
for each(var obj:Object in da){
obj.dgSelected=false;
}
cbc.cloumnSelected=false;
da.refresh();
}


]]>
</fx:Script>


<mx:DataGrid id="dgId" x="10" y="10" width="450" height="200" itemClick="selItem()" fontSize="12">
<mx:columns>
<comp:CheckBoxColumn dataField="dgSelected" width="25" id="cbc"
draggable="false" resizable="false" sortable="false"
headerRenderer="{new ClassFactory(comp.CheckBoxHeaderRenderer)}"
itemRenderer="{new ClassFactory(comp.CheckBoxItemRenderer)}"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="电话" dataField="phone"/>
<mx:DataGridColumn headerText="邮件" dataField="email"/>
<mx:DataGridColumn headerText="操作" itemRenderer="comp.Operate" dataField="name"/>
<mx:DataGridColumn headerText="操作" itemRenderer="ddd.ddd" dataField="phone"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox y="300">
<mx:Button top="300" click="ladygaga()" label="弹出选中" fontSize="12"/>
<mx:Button click="clearChecked()" label="清除选中" fontSize="12"/>
</mx:HBox>
</s:WindowedApplication>





<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">

<fx:Script>
<![CDATA[
import mx.controls.Alert;

protected function lblData_clickHandler(event:MouseEvent):void
{
Alert.show(dataGridListData.label);
}

]]>
</fx:Script>

<s:HGroup top="0" left="0" right="0" bottom="0" horizontalAlign="center">
<s:Label text="删除" click="lblData_clickHandler(event)" buttonMode="true" />
</s:HGroup>
</s:MXDataGridItemRenderer>




bug:已有选中行后,如果在点击checkbox不起作用,或者是不是想要的结果
修复:在checkboxitemrenderer的change事件中派发一个事件,通知父组件不要在触发itemclick事件
dispatchEvent(new Event(CHECKBOX_CHANGE));
addEventListener(CheckBoxItemRenderer.CHECKBOX_CHANGE, function(){
checkboxClick = true;
}, true);
private function itemClick():void{
if(checkboxClick) {
// 这里直接返回不继续执行
checkboxClick = false;
return;
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值