在DataGrid中实现CheckBox

最近在flex项目中,实现了该功能,share下:

xxxx.mxml

<mx:DataGrid id="overViewDataGrid" width="100%" height="100%" rowCount="5" dataProvider="{_dataProvider}" itemClick="showDetailInfo()">
<mx:columns>
<component:TCheckBoxColumn width="25" id="checkBoxColumn"
draggable="false" resizable="false" sortable="false"
headerRenderer="{new ClassFactory(TCheckBoxHeaderRender)}"
itemRenderer="{new ClassFactory(TCheckBoxItemRender)}" >
</component:TCheckBoxColumn>
<mx:DataGridColumn headerText="Name" labelFunction="formatName"/>
<mx:DataGridColumn headerText="IP Address" labelFunction="formatIP"/>
<mx:DataGridColumn headerText="Running" labelFunction="formatOS"/>
<mx:DataGridColumn headerText="Confidence" labelFunction="formatConfidence"/>
</mx:columns>
</mx:DataGrid>


TCheckBoxHeaderRender.as:


public class TCheckBoxHeaderRender extends TCheckBox{
private var _data:TCheckBoxColumn;
private var column:TCheckBoxColumn;
private var dg:DataGrid;
private var dgDataArr:ArrayCollection;
public function TCheckBoxHeaderRender(){
super();
this.showMiddle = true;
this.addEventListener(Event.CHANGE,onChange);
}
override public function get data():Object{
return _data;

}
override public function set data(value:Object):void{
_data = value as TCheckBoxColumn;
selected = _data.cloumnSelected;
}

private function onChange(event:Event):void{
dg = DataGrid(listData.owner);
column = dg.columns[listData.columnIndex];
dgDataArr = dg.dataProvider as ArrayCollection;
column.cloumnSelected = this.selected;
column.selectItems = new Array();
checkButtonState();
dgDataArr.refresh();
}

private function checkButtonState():void {
if(this.selected){
column.selectItems = (dg.dataProvider as ArrayCollection).toArray();
if(column.isDisable){
column.canRemove = false;
}else {
column.canRemove = true;
}
}else {
column.canRemove = false;
}

if(dgDataArr.length>0){
if(dgDataArr[0]!=""){
for(var i:int = 0; i < dgDataArr.length ; i++){
Object(dgDataArr[i]).isSelected = this.selected;
if(dgDataArr.length==1&&this.selected&&!column.isDisable){
column.canEdit = true;
}else{
column.canEdit = false;
}

}
}
}
}
}


TCheckBoxItemRender.as:


public class TCheckBoxItemRender extends TCheckBox{
private var currentData:Object;
private var model:TModelLocator = TModelLocator.getInstance();
public function TCheckBoxItemRender(){
super();
this.showMiddle = true;
this.addEventListener(MouseEvent.CLICK,onClickCheckBox);
this.addEventListener(Event.CANCEL,onClickCheckBox);
}

override public function set data(value:Object):void{
this.selected = value.isSelected;
this.currentData = value;
}


private function onClickCheckBox(e:Event):void{
var dg:DataGrid = DataGrid(listData.owner);
var column:TCheckBoxColumn = dg.columns[listData.columnIndex];
this.currentData.isSelected = this.selected;
if(this.selected){
column.selectItems.push(this.currentData);
}else{
for(var i:int = 0; i<column.selectItems.length; i++){
if(column.selectItems[i] == this.currentData){
column.selectItems.splice(i,1)
}
}
}
if(column.isDisable) {
column.canRemove = false;
column.canEdit =false;
}else{
if(column.selectItems.length==1) {
column.canRemove = true;
column.canEdit = true;
}else if(column.selectItems.length>1) {
column.canEdit = false;
column.canRemove = true;
}else {
column.canEdit = false;
column.canRemove = false;
}
}

changeCheckBoxHeader();
}

private function changeCheckBoxHeader():void{
var dg:DataGrid = DataGrid(listData.owner);

var dgDataArr:ArrayCollection = dg.dataProvider as ArrayCollection;
var totalColumnSize:int =dgDataArr.length;

var allSelected=true;

var selectColumnArr:Array = dg.columns[0].selectItems;
var selectColumnSize:int = selectColumnArr.length;

if(selectColumnSize!=totalColumnSize){
allSelected = false;
}

var headerColumn :TCheckBoxColumn = dg.columns[0];

if(allSelected){
headerColumn.cloumnSelected=true;
}else{
headerColumn.cloumnSelected=false;
}

dgDataArr.refresh();
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值