全选或取消DataGrid中的checkbox

    在flex的DataGrid中动态生成的checkbox，不能像处理html页面中的checkbox那样，可以直接获得checkbox控件，而且flex中checkbox的属性与html中checkbox的属性也是不同的，例如html中的checkbox带有value属性，而在flex中checkbox是没有value属性的，也就是说我们要处理DataGrid中的checkbox面临两个难题，一是如何获取checkbox，二是如何获取checkbox的value。采用传统的html方式这些问题是无法解决的，正确的解决办法在于对事件的处理。

   首先，自定义checkbox控件keiyakusakiCheckBox，并且在checkbox控件中添加change事件。代码如下:                                                                                                                            <?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import event.KeiyakusakiCheckEvent;
   import flash.events.Event;
   import com.adobe.cairngorm.control.CairngormEventDispatcher;
   import model.KeihoModelLocator;
   
   [Bindable]
            private var modelLocator:KeihoModelLocator = KeihoModelLocator.getInstance();
   
   internal function addKeiyakusaki() : void {
    var eventBroadCast:CairngormEventDispatcher = CairngormEventDispatcher.getInstance();
    eventBroadCast.dispatchEvent(new KeiyakusakiCheckEvent(data, keiyakusaki_check.selected));
   }
  ]]>
 </mx:Script>
 <mx:CheckBox id="keiyakusaki_check" x="20" y="0" selected="{modelLocator.keiyakusakiCheckBoxSelect}" change="addKeiyakusaki()"/>
</mx:Canvas>

将自定义的keiyakusakiCheckBox添加到DataGrid中，

<mx:DataGridColumn headerText="选择" itemRenderer="view.keiyakusakiCheckBox" width="50"/> <mx:DataGridColumn headerText="数据" dataField="keiyakusakiCode" width="100"/>

这里我使用了Cairngorm框架，个人认为其算不得真正的框架，只能说是提供了一种适合于flex的模式。checkbox的select属性是通过KeihoModelLocator类的一个Boolean型keiyakusakiCheckBoxSelect属性来控制的，注意KeihoModelLocator是单例模式的，保证整个页面的checkbox的select属性由keiyakusakiCheckBoxSelect属性来控制。

 KeiyakusakiCheckEvent这个时间是用于响应checkbox的change事件的，data是控件内部自带属性，封装了对应的数据(同一个colum中的数据)，另一个参数为Boolean型变量，代表check是否选中。

package event
{
 import flash.events.Event;
 import vo.KeiyakusakiVO;
 import com.adobe.cairngorm.control.CairngormEvent;
 import control.KeihoController;
 
 public class KeiyakusakiCheckEvent extends CairngormEvent {
  
  public var isAdd : Boolean;
  public var keiyakusaki : Object;
  
  function KeiyakusakiCheckEvent(_data:Object, _isAdd:Boolean) : void {
   isAdd = _isAdd;
   keiyakusaki = _data;
   super(KeihoController.EVENT_KEIYAKUSAKI_CHECK);
  }
 }
}

现在已经将checkbox添加到DataGrid中，并且应经能够响应change事件，接下来进行数据的提取。   KeiyakusakiCheckCommand类中的execute方法中处理，

public function execute(event:CairngormEvent) : void
  {
   var keiyakusakiEvent:KeiyakusakiCheckEvent = event as KeiyakusakiCheckEvent;
    //数据不为空时
   if(keiyakusakiEvent.keiyakusaki != null) {                                                               
    var indexPositon:int = modelLocator.keiyakusakiCodeList.getItemIndex(keiyakusakiEvent.keiyakusaki.keiyakusakiCode);
    if(keiyakusakiEvent.isAdd && (indexPositon == -1)) {
              modelLocator.keiyakusakiCodeList.addItem(keiyakusakiEvent.keiyakusaki.keiyakusakiCD);
             } else if(!keiyakusakiEvent.isAdd && indexPositon != -1){
              modelLocator.keiyakusakiCodeList.removeItemAt(indexPositon);
             }
     }
  }

此处必须对数据进行严格控制，keiyakusakiCodeList为modelLocator中的ArrayColletion类型的集合，用于存放选中的数据，这里必须保证每次插入的数据都是集合中没有的，移除的数据必须是集合中存在的。

最后就是点击全选按钮或者清除按钮时，所有进行的操作了。确认button按下时执行一下代码，这里改变两次状态以实现状态改变，否则虽然数据改变，但画面状态不会改变，因为checkbox只响应change事件，

modelLocator.keiyakusakiCheckBoxSelect = false;
modelLocator.keiyakusakiCheckBoxSelect = true;

同理点击取消button的操作也需要两次改变keiyakusakiCheckBoxSelect 的状态。学习时间不长，不正确的地方希望高手指正。

评论

1 楼 three_uncle 2008-09-25  

参考了。。。这篇帖子真练眼力。。。