组件之DataGrid

组件之DataGrid

DataGrid 类是基于列表的组件，提供呈行和列分布的网格。 可以在该组件顶部指定一个可选标题行，用于显示所有属性名称。 每一行由一列或多列组成，其中每一列表示属于指定数据对象的一个属性。 DataGrid 组件用于查看数据，并不适合用作类似于 HTML 表格的布局工具。

DataGrid 组件特别适用于显示包含多个属性的对象。 DataGrid 组件所显示的数据可以包含在 DataProvider 对象中或显示为对象的数组。 DataGrid 组件的列可通过 DataGridColumn 对象的列表表示，其中每个对象包含特定于列的信息

DataGrid 组件提供以下功能：

——列可以具有不同宽度或同一固定宽度

——用户可以在运行时调整列的尺寸

——用户可以使用 ActionScript 在运行时对列进行重新排序

——可选择自定义列标题

——支持在任意列中使用自定义项目渲染器来显示非文本数据

——支持通过单击数据所在的列对数据进行排序

以下是一个信息列表

 建一个这样的表格可以用DateGrid组件和xml文件完成。

package  {
 
 import flash.display.MovieClip;
 import fl.controls.*;
 import flash.net.URLLoader;
 import flash.text.TextFormat;
 import fl.data.*;
 import flash.net.URLRequest;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 public class DataGridMain extends MovieClip {
  
  private var dataG:DataGrid = new DataGrid();
  
  private var ds:DataProvider;
  private var loader:URLLoader;

private var arr:Array = [];
  private var num:int = 0;
  
  
  [Embed(source = "2.jpg")]
  private var img:Class;
  
  public function DataGridMain() {
   var txtF:TextFormat =  new TextFormat("宋体",12,0xff0000);
   dataG.setRendererStyle("textFormat",txtF);
   addChild(dataG);
   loader = new URLLoader();
   loader.load(new URLRequest("dataGrid.xml"));
   loader.addEventListener(Event.COMPLETE,setXml);

}
  private function setXml(e:Event):void
  {
   var xml:XML = new XML(loader.data);
   var dp:DataProvider = new DataProvider(xml);
   arr = dp.toArray();
   var arrs:Array = [];
   arrs = arr.slice(0,5);
   ds = new DataProvider(arrs);
   setDataGrid();
   
  }

private function setDataGrid():void
  {
   dataG.dataProvider = ds;
   dataG.setSize(600,300);
   dataG.move(25,20);
   dataG.columns = ["group","city","realname","sex","mobile","email","postcode"];
   var headtext:Array = ["分组","城市","姓名","性别","手机","email","邮政编码"];
   for(var i:int = 0 ; i<headtext.length; i++)
   {
    dataG.getColumnAt(i).headerText = headtext[i];
    //设置这个属性以后, 点击这个列的时候  就不再排序
    dataG.getColumnAt(i).sortable = false;
   }
   dataG.addEventListener(MouseEvent.CLICK,getColumns);
  }
  private function getColumns(e:MouseEvent):void
  {
   if(dataG.selectedItem != null)
   {
    trace(dataG.selectedItem);
    for each(var item in dataG.selectedItem)
    {
     trace(item);
    }
   }
  }
  
 }
 
}

再在同一路径下建立xml文件设置表格内容

xml文件方便他人更改。使用。

以上表格内容在xml文件中可设置如下：

<?xml version="1.0" encoding="UTF-8" ?>
<addresses>
  <address group="家人" >
    <realname>明明</realname>
    <birthday>1981-1-1</birthday>
    <sex>女</sex>
    <tel>010-84685618</tel>
    <mobile>13821912666</mobile>
    <email>liliqing@126.com</email>
    <qq>676576093</qq>
    <city>北京</city>
    <addr>北京市朝阳区和平西街</addr>
    <postcode>100080</postcode>
  </address>
  <address group="家人" >
    <realname>东子</realname>
    <birthday>1979-2-14</birthday>
    <sex>男</sex>
    <tel>021-89898989</tel>
    <mobile>13789878877</mobile>
    <email>zhangjun@126.com</email>
    <qq>990090909</qq>
    <city>上海</city>
    <addr>上海市虹口区四川北路</addr>
    <postcode>200001</postcode>
  </address>
  <address group="家人" >
    <realname>丽姐</realname>
    <birthday>1982-6-22</birthday>
    <sex>女</sex>
    <tel>010-87654321</tel>
    <mobile>13567890987</mobile>
    <email>yangshuzheng@qq.com</email>
    <qq>898989988</qq>
    <city>北京</city>
    <addr>北京市农科院科技楼410</addr>
    <postcode>100081</postcode>
  </address>
  <address group="家人" >
    <realname>小倩</realname>
    <birthday>1985-10-2</birthday>
    <sex>男</sex>
    <tel>010-67675454</tel>
    <mobile>1376545678</mobile>
    <email>sunlei@126.com</email>
    <qq>9090909009</qq>
    <city>北京</city>
    <addr>北京市农科院科技楼409</addr>
    <postcode>100080</postcode>
  </address>

<address group="同学" >
    <realname>小雨</realname>
    <birthday>1973-11-1</birthday>
    <sex>女</sex>
    <tel>022-87876565</tel>
    <mobile>13546789876</mobile>
    <email>liuliming@126.com</email>
    <qq>454545454</qq>
    <city>天津</city>
    <addr>天津市滨海区哈尔滨路5号</addr>
    <postcode>300002</postcode>
  </address>

</address>