使用itemRenderer给DataGrid添加复选框-DataGrid系列示例

发布于，归属于flex实例。 只剩下板凳啦！ 共有1,179人围观    

先来看演示：

当用户点击DataGrid内的复选框时。在DataGrid下面出现单条记录的信息。

由于此示例需要包含自定义子组件和自定义事件，所以提供源代码下载而不再贴出全部代码。

点此下载

关键知识点说明：

  1. itemRenderer的用法，itemRenderer是flex的DataGrid强大的精髓，正是由于此属性的存在，才有可能随心所欲的控制DataGrid的数据
  2. 创建自定义事件，并予以派发

先来看复选框子组件(view文件夹下)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="24">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import event.DataGridEvent;
  6.             private function select():void{
  7.                 this.parentApplication.dispatchEvent(new DataGridEvent(data,check.selected));
  8.             }
  9.         ]]>
  10.     </mx:Script>
  11.     <mx:CheckBox id="check" x="0" y="0" change="select()"  />
  12. </mx:Canvas>

CheckBox定义个change事件，在复选框的值被改变的时候，向父容器（DataGrid）派发自定义事件。

先来看自定义事件(event文件夹下)

  1. package event
  2. {
  3.     import flash.events.Event;
  4.     public class DataGridEvent extends Event
  5.     {
  6.         public var isSelect:Boolean;
  7.         public var o:Object;
  8.         public function DataGridEvent(_o:Object,_isSelect:Boolean):void
  9.         {
  10.             o = _o;
  11.             isSelect = _isSelect;
  12.             super("selectRow");
  13.         }
  14.  
  15.     }
  16. }

自定义事件必须继承于Event。此事件接受二个参数，_o为该行数据，_isSelect复选框的值。
指的一提的是super(“selectRow”);这句非常关键。此句的意思是调用父类的构造函数，并将事件类型传递出去。

先来看主程序：

  1. <mx:DataGridColumn headerText="选择" itemRenderer="view.CheckBox" width="40" />

调用子组件

  1. addEventListener("selectRow",selectHandler);
  1. private function selectHandler(evt:event.DataGridEvent):void{
  2.                  if(evt.isSelect){
  3.                      title_label.text = "标题："+evt.o.title;
  4.                      link_label.text = "链接："+evt.o.link;
  5.                      pubDate_label.text = "发表日期："+evt.o.pubDate;
  6.                  }else{
  7.                      title_label.text = "";
  8.                      link_label.text = "";
  9.                      pubDate_label.text = "";                    
  10.                  }
  11.              }

监听自定义事件。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. wangc

    这个选中后复选框会出现混乱啊，怎么改啊

同类