flex DataGrid控件1 学习

         DataGrid控件是一个可以展示多列数据的列表控件。展示数据的表格。在flex中DataGrid的展示效果很炫。

列头可以随意的拖动和排序。

关于DataGrid控件
DataGrid控件可以提供以下功能：
1、可调尺寸、排序、自定义列（包括隐藏列）
2、设置自定义列和标题行（包括设置标题行文本换行）
3、在运行时用户可以resize and reorder
4、触发选中事件
5、可以在任一列使用自定义项目输出(custom item renderer)
6、支持分页
7、锁定行和列，不显示滚动条

 

创建一个DataGrid控件

1.固定数据

列头的标签：

<mx:columus>

 <mx:DataGridColumn headerText="编号" dataField="绑定的列名“/>

</mx:columus>

表数据：

<mx:ArrayCollection>

      <mx:Object>
            <mx:bid>01</mx:bid>
            <mx:bname>lee</mx:bname>
            <mx:bsex>男</mx:bsex> 
       </mx:Object>

</mx:ArrayCollection>

完整代码：

 <mx:DataGrid x="10" y="10">
  <mx:columns>
   <mx:DataGridColumn headerText="编号" dataField="bid"/>
   <mx:DataGridColumn headerText="名称" dataField="bname"/>
   <mx:DataGridColumn headerText="性别" dataField="bsex"/>
  </mx:columns>
      <mx:ArrayCollection>
         <mx:Object>
            <mx:bid>01</mx:bid>
            <mx:bname>lee</mx:bname>
            <mx:bsex>男</mx:bsex>
         </mx:Object>
         <mx:Object>
            <mx:bid>02</mx:bid>
            <mx:bname>rose</mx:bname>
            <mx:bsex>女</mx:bsex>
         </mx:Object>
      </mx:ArrayCollection>
   </mx:DataGrid>

 

2.固定数据2

使用mx:DataGridColumn明确有哪些列：

<mx:DataGrid>

   <mx:ArrayCollection>

         <mx:Object bid="01" bname="lee" bsex="男" />

         <mx:Object bid="02" bname="rose" bsex="女" />

      </mx:ArrayCollection>

      <mx:columns>

         <mx:DataGridColumn dataField="bid" />

         <mx:DataGridColumn dataField="bname" />

      </mx:columns>

   </mx:DataGrid>

</mx:Application>

隐藏和显示列某一列数据

新建一个按钮作为显示和隐藏的开关

完整代码:

 <mx:DataGrid x="10" y="10">
  <mx:columns>
   <mx:DataGridColumn headerText="编号" dataField="bid"/>
   <mx:DataGridColumn headerText="名称" dataField="bname"/>
   <mx:DataGridColumn id="sex" visible="false" headerText="性别" dataField="bsex"/>
  </mx:columns>
      <mx:ArrayCollection>
         <mx:Object>
            <mx:bid>01</mx:bid>
            <mx:bname>lee</mx:bname>
            <mx:bsex>男</mx:bsex>
         </mx:Object>
         <mx:Object>
            <mx:bid>02</mx:bid>
            <mx:bname>rose</mx:bname>
            <mx:bsex>女</mx:bsex>
         </mx:Object>
      </mx:ArrayCollection>
   </mx:DataGrid>
 <mx:Button label="显示或隐藏" click="sex.visible = !sex.visible;"/>

3.动态数据

通过ActionScript绑定数据

DataGrid的dataProvider属性用来绑定数据。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData()">
  <mx:Script>
  <![CDATA[
   import mx.collections.*;
        private var DGArray:Array = [
          {bid:'01', bname:'lee', bsex:'男'},
          {bid:'02', bname:'rose', bsex:'女'}];
        
      [Bindable]
      public var initDG:ArrayCollection;
      //从数组Array初始化initDG ArrayCollection.
      //你可以转化HTTPService, WebService, or RemoteObject的结果为ArrayCollection.
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }

  ]]>
 </mx:Script>
 
 <mx:DataGrid y="10" x="182"  id="myGrid" dataProvider="{initDG}" >
  <mx:columns>
   <mx:DataGridColumn headerText="编号" dataField="bid"/>
   <mx:DataGridColumn headerText="名称" dataField="bname"/>
   <mx:DataGridColumn headerText="性别" dataField="bsex"/>
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>

等待要要补充。呵呵