FLEX 中的DataGrid使用

Flex教程/组件详解之一：DataGrid(1-2)

今天来介绍一个DataGrid的使用,DataGrid是基于列表的控件,以表格的形式输出数据,可以当他是一个多列的list.
我们将从建立、数据填充、取值、删除、拖拽(?不晓得有没有打错)等几个方面来详细介绍DataGrid的用法,另外,每个由于当前网上普遍的教程都重在mxml描述进来介绍,忽略了由actionscript操作的相关介绍,所以教程从mxml跟as对比进行介绍:

1.建立DataGrid
2.设置表头
3.数据绑定
4.数据增加/删除/获取
5.DataGrid编辑数据(1)
6.DataGrid编辑数据(2)：itemEditor/itemRenderer

建立DataGrid
我们先来介绍一下建立DataGrid,分别从mxml跟actionscript
mxml

<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"">
  <mx:DataGrid y=""10"" width=""250"" right=""10"">
  </mx:DataGrid>
</mx:Application>

actionscript

<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"">
  <mx:Script>
    <![CDATA[
      private var DataGrid1:DataGrid;
      private function init():void{
        DataGrid1 = new DataGrid()
        DataGrid1.x = 10
        DataGrid1.y = 30
        DataGrid1.width = 250
        addChild(DataGrid1)
      }
    ]]>
  </mx:Script>
</mx:Application>

上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然~因为空空的~并不是我们常见到的样子..那么我们下面继续设置表头(列).

设置表头
所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行：
mxml

<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
  <mx:DataGrid id=""DataGrid2"" editable=""true"" width=""300"" y=""30"" right=""10"">
    <mx:columns>
      <mx:DataGridColumn headerText=""序号"" dataField=""id""/>
      <mx:DataGridColumn headerText=""名称"" dataField=""name""/>
      <mx:DataGridColumn headerText=""数量"" dataField=""count""/>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>

actionscript
DataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,然后添加到DataGrid的columns属性里(ps:columns就是保存DataGrid列的属性.为DataGridColumn的数组).

<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
  <mx:Script>
    <![CDATA[
      import mx.controls.*;
      import mx.controls.dataGridClasses.*;
      private var DataGrid1:DataGrid;
      private function init():void{
        DataGrid1 = new DataGrid()
        DataGrid1.x = 10
        DataGrid1.y = 30
        DataGrid1.width = 275
        addChild(DataGrid1)
        crColumn();//用脚本增加列
      }
      
      private function crColumn():void{
        var col:DataGridColumn
        
        col = new DataGridColumn()
        col.headerText = ""序号""
        col.dataField = ""id""
        DataGrid1.columns = DataGrid1.columns.concat(col)
        
        col = new DataGridColumn()
        col.headerText = ""名称""
        col.dataField = ""name""
        DataGrid1.columns = DataGrid1.columns.concat(col)
        
        col = new DataGridColumn()
        col.headerText = ""数量""
        col.dataField = ""count""
        DataGrid1.columns = DataGrid1.columns.concat(col)
      }
    ]]>
  </mx:Script>
</mx:Application>

这里要注意的时.虽然DataGrid.columns为保存列数据的数据,不过