Adobe Flex迷你教程 -- DataGrid，全选，删除选中项

这个demo是对上一个DataGrid demo的修改，目的是为了实现控制checkBox itemrender全选所有项，然后删除所有项。

在上一个版本中，我在ICheckBox.as的set data function中根据当前value选中checkbox并且将选中的value push到selectedItems array中，这里有一个问题是grid不会初始化被scrollbar 隐藏的项 (谢谢lianyedie找到问题)，所以会导致一个问题，没有显示部分的选中的item没有被正确加入到selectedItems array中。这个版本中我主要简化了iCheckBox.as, 不在setvlaue中设置选中项（同时也防止了重复插入选中项的问题）。


Demo内容：


1. 点击check box选中item，或点击全选，选中所有项。
2. 点击删除选中项，选中项的 status将变成 Deleted.

iCheckBox.as

package
{
import flash.events.Event;

import mx.controls.CheckBox;
import mx.core.Application;



public class iCheckBox extends CheckBox
{
private var currentData:Object; //保存当前一行值的对象

public function iCheckBox()
{
   super();
   this.addEventListener(Event.CHANGE,changeHandle)
}

override public function set data(value:Object):void{
   this.selected = value.action.toString() == "true"?true:false;
   this.currentData = value; //保存整行的引用
}
//点击check box时，根据状况向selectedItems array中添加当前行的引用，或者从array中移除
private function changeHandle(e:Event):void{
   var itemArray:Array = Application.application.selectedItems
   this.currentData.action = this.selected.toString()
   if(this.selected){
       itemArray.push(this.currentData)
   }else{
       for(var i:int = 0; i<itemArray.length; i++){
           if(itemArray[i] == this.currentData){
               itemArray.splice(i,1)
           }
       }
   }
}

}
}

GridDemo.mxml

//从dataProvider中将选中的项放入 selectedItems array
private function initSelectedItems():void{
        for(var i:int=0; i <idata.length; i++){
            if(idata[i].action.toString() == "true"){
                this.selectedItems.push(idata[i])
            }
        }
}





原文:http://www.flextheworld.com/?p=43

版主：还想请教回车仿Tab，Z字型转移焦点的问题。
我写了一段，俘获回车事件，然后
方法1：将event中的回车，偷梁换柱成Tab
方法2：灭掉当前的回车事件（要不焦点往下一行去），然后放出一个失去焦点事件（仿的DataGrid中itemEditorFocusOutHandler）
但是，第一种方法无效，第二种方法，总是出错。
请教版主该如何处理？？

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    xmlns:flexlib="http://code.google.com/p/flexlib/"
    xmlns:ns1="com.fujitsu.cn.bfs.yangtze.components.*"
   xmlns:ctrl="com.fujitsu.cn.bfs.fuhua.wms.control.lm.*"
   >
    <mx:XML id="treeNavigatorXml" source="assets/xml/navigator.xml" />
    <mx:XML id="menuXml" source="assets/xml/menu.xml" />
    <mx:XML id="toolbarXml" source="assets/xml/toolbar.xml" />
    <ctrl:WLM0030FCtrl id="ctrl"/>
        <mx:Panel id="mainPanel" textAlign="left" title="Fuhua V4" width="100%" height="100%" backgroundColor="#F0F0F0">
            <mx:VBox horizontalAlign="left" verticalAlign="top" horizontalGap="0" width="100%" borderStyle="none" height="100%">
                <mx:ApplicationControlBar width="100%" paddingTop="0" paddingLeft="0" paddingBottom="0" paddingRight="0">
                    <mx:VBox width="100%">
                        <mx:MenuBar id="menu" showRoot="false" width="100%" height="22"/>
                        <mx:LinkBar id="quickButtons" width="100%" height="40" horizontalAlign="left"/>
                    </mx:VBox>
                </mx:ApplicationControlBar>
                <mx:HDividedBox id="hdivbox" width="100%" height="100%" borderStyle="none" liveDragging="false">
                    <mx:VBox id="navBox" height="100%" width="200" borderStyle="solid" horizontalAlign="right" verticalGap="0" backgroundColor="#ffffff">
                        <mx:LinkButton label="" toolTip="Fix" cornerRadius="0" width="16" height="16" id="nailButton" toggle="true"/>
                        <mx:Tree id="treeNavigator" showRoot="false" height="100%" width="100%" borderStyle="none"/>            
                    </mx:VBox>
                    <flexlib:MDICanvas id="mdiCanvas" horizontalScrollPolicy="off" verticalScrollPolicy="off"
                        width="100%" height="100%" backgroundColor="#FFFFFF" backgroundAlpha="0">  
                    </flexlib:MDICanvas>
                </mx:HDividedBox>
                <mx:ControlBar width="100%" height="32" verticalAlign="middle" horizontalAlign="right">
                    <mx:Label id="process" visible="false"/>
                    <mx:ProgressBar id="pgrsProcess" trackHeight="16" width="60" height="16" label=" " textAlign="right" indeterminate="true" enabled="true" themeColor="#0600FF" visible="{process.text!='0'}"/>
                </mx:ControlBar>
            </mx:VBox>
        </mx:Panel>

</mx:Canvas>

上面两种方法都不好，这样,下面这个方法在keyDown时执行，TODO的地方你自己补充完整。

private function enterHandle(e:KeyboardEvent):void{
           if(e.keyCode == 13){
               //获取当前编辑位置
               var currentPosition:Object = this.grid.editedItemPosition;
               var currentColumnIndex:int = currentPosition.columnIndex;
               var currentRowIndex:int = currentPosition.rowIndex;
               
               //TOOO: 不超过当前列数的时nextColumnIndex = currentColumnIndex +1
               //最后一个item时， nextRowIndex = currentRowIndex+1; nextColumnIndex=0
               //this.grid.editedItemPosition ={columnIndex:nextColumnIndex, rowIndex:nextRowIndex}
           }
           
           
       }

这么不“智能”呀？
都要自己算呀？！
还要考虑右边的是否是可编辑的？
还要考虑是否有列被多拽过位置？？

我还没找到更好的方法，你现在实际上是在改变grid中回车后 tab的方向，更好的办法就是以tab代替触发的enter,不过我试了下override keydown事件，默认的enter和tab还是继续执行，看来不是在这里处理的，如能找到地方直接触发tab事件当然最好。


这个方法计算很简单，不需要考虑是否被拖拽过，我们只是设置它的下一个位置。设置之前要判断下一个column是否editable.

var itemArray:Array = Application.application.selectedItems

如果我的datagrid程序不是一个Application的，而是一个TitileWindow的，怎么在icheckbox里得到那个
selectedItems呢，我把selectedItems改成ArrayCollection了，

直接new一个对象得不到它的selectedItems；

package bank.manager.control.allcheckbox
{
import bank.manager.view.UserPara.NrlrgtUp;
import bank.manager.vo.NrlrgtUpBean;

import flash.events.Event;

import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
import mx.controls.Alert;


public class iCheckBox extends CheckBox
{
private var currentData:NrlrgtUpBean; //保存当前一行值的对象
public var nrl:NrlrgtUp = new NrlrgtUp();

public function iCheckBox()
{
 super();
 this.addEventListener(Event.CHANGE,changeHandle);
}

override public function set data(value:Object):void{
 this.selected = value.isSelected.toString() == "true"?true:false;
 this.currentData = value as NrlrgtUpBean;
}

//点击check box时，根据状况向selectedItems array中添加当前行的引用，或者从array中移除
private function changeHandle(e:Event):void{
 var itemArray:ArrayCollection = nrl.selectedItems;
 this.currentData.isSelected = this.selected.toString();
 if(this.selected){
  if(!itemArray.contains(this.currentData)){
   itemArray.addItem(this.currentData);
  }
 }else{
              for(var i:int = 0; i<itemArray.length; i++){
                  if(itemArray.getItemAt(i) == this.currentData){
                      itemArray.removeItemAt(i);
                  }
              }
 }
}}
}

这个好像也有问题，当点击全选时会重复加入数据，应该判断一下array中是否有该数据，
array中有直接清空当前数据的方法吗？？

Application.application.selectedItems只是例子，你继承一下DataGrid,在 Grid中加一个这个属性（grid中本来有一个selectedItems, 换一个名字），以后的存储就都只和这个Grid有关。如果放在外面的话那就是 iCheckBox.parent.parent.document找到Grid所在的父对象。

arrary = new Array()就清空了

非常感谢斑竹耐心的解释！

楼主，加油，   如果这个像asp.net中的GridView那样方便就好了

不错的帖子，谢谢分享