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为保存列数据的数据,不过我们直接用操作DataGrid.columns将不会进行修改,而必须将修改后的DataGridColumn数组重新赋值给DataGrid,像上面看到的DataGrid1.columns = DataGrid1.columns.concat(col).

随便说明一下.mxml跟actionscript中出现的headerText,即为表头的文字,而dataField是绑定数据中相关的字段.关于这个,我们将在下节进行说明.

Flex教程/组件详解之一：DataGrid(3)

上节我们介绍了DataGrid的建立与设置表头,今天我们介绍一下DataGrid中重要的功能数据绑定(dataProvider).
DataGrid.的数据源技术多种数据格式.XML,Array,Model,我们分别说一下Array跟XML(Model跟XML类似).

数组(Array)形式的数据源.常用在数据源为写程序的时候已经设定好.非外部加载时比较多(外部加载一般为xml) 

[Bindable]
public var dataArr:Array = [{id:1,name:"苹果",count:100},
              {id:2,name:"西瓜",count:200},
              {id:3,name:"水蜜桃",count:50}]

这里随便介绍一下[Bindable],他的作用是把数据设置为可绑定...

看一下完成代码.我们在(1-2)节的文件上继续~

<?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;
      
      [Bindable]
      public var dataArr:Array = [{id:1,name:"苹果",count:100},
                    {id:2,name:"西瓜",count:200},
                    {id:3,name:"水蜜桃",count:50}]
      
      private function init():void{
        DataGrid1 = new DataGrid()
        DataGrid1.x = 10
        DataGrid1.y = 30
        DataGrid1.width = 275
        addChild(DataGrid1)
        crColumn();//用脚本增加列
        DataGrid1.dataProvider = dataArr
      }
      
      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:DataGrid id="DataGrid2" dataProvider="{dataArr}" width="275" y="30" right="10">
    <mx:columns>
      <mx:DataGridColumn headerText="序号" dataField="id"/>
      <mx:DataGridColumn headerText="名称" dataField="name"/>
      <mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"/>
    </mx:columns>
  </mx:DataGrid>
  
  <mx:Label x="440" y="10" text="mxml"/>
  <mx:Label x="104" y="10" text="actionscript"/>
  
</mx:Application>

绑定数据时必要注意的是.列中必须与数据中相应的字段(dataField).

另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头.
像上面的代码我们把
//crColumn();//用脚本增加列
屏蔽了
并把mxml中的<mx:columns>节点
<!--mx:columns>
  <mx:DataGridColumn headerText="序号" dataField="id" />
  <mx:DataGridColumn headerText="名称" dataField="name"/>
  <mx:DataGridColumn headerText="数量" dataField="count"/>
</mx:columns-->
进行上面的注释,执行后将看到下边的效果.(注意看表头)

XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据.

[Bindable]
public var dataArr:XML = <data>
              <item id="1" count="100">
                <name>苹果</name>
              </item>
              <item id="2" count="200">
                <name>西瓜</name>
              </item>
              <item id="3" count="50">
                <name>水蜜桃</name>
              </item>
            </data>

xml跟数据的操作差不多..也是直接设置dataProvider即可..不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改~(注意dataField的区别,属性在这里应该使用"@属性名",熟悉xml的朋友都了解,我就不多读说了) 

<?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;
      
      [Bindable]
      public var dataArr:XML = <data>
                    <item id="1" count="100">
                      <name>苹果</name>
                    </item>
                    <item id="2" count="200">
                      <name>西瓜</name>
                    </item>
                    <item id="3" count="50">
                      <name>水蜜桃</name>
                    </item>
                  </data>
      private function init():void{
        DataGrid1 = new DataGrid()
        DataGrid1.x = 10
        DataGrid1.y = 30
        DataGrid1.width = 275
        addChild(DataGrid1)
        crColumn();//用脚本增加列
        DataGrid1.dataProvider = dataArr.item
      }
      
      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:DataGrid id="DataGrid2" dataProvider="{dataArr.item}"
 width="275" y="30" right="10">
    <mx:columns>
      <mx:DataGridColumn headerText="序号" dataField="@id"/>
      <mx:DataGridColumn headerText="名称" dataField="name"/>
      <mx:DataGridColumn headerText="数量" dataField="@count" editorDataField="value"/>
    </mx:columns>
  </mx:DataGrid>
  
  
  <mx:Label x="440" y="10" text="mxml"/>
  <mx:Label x="104" y="10" text="actionscript"/>
</mx:Application>

Flex教程/组件详解之一：DataGrid(4)

今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。

添加/删除
由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候..只需要对所绑定的数据进行相应的操作即可。这里就不多说了..一会直接看代码。
要提示一下的是..虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新..需要DataGrid对数据源进行一次反向操作(就在是DataGrid下进行编辑,下一节会介绍),才会进行更新,所以如果希望立刻更新的话..我们可以再指行一次数据指定..
DataGrid.dataProvider = 数据源

获取
这里所说的获取..是当我们对DataGrid进行的操作(点击项目)的时候..进行所点击的位置索引与数据的获取.
(如果要获取指定第几行，每几列的数据，这样对数据源进行操作即可)

当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
(ps:下边提到的e为ListEvent事件对象..)
1.所点击的列的表头
(e.target as DataGrid).columns[e.columnIndex].headerText
2.点击的列索引
e.columnIndex
3.点击的行索引
e.rowIndex
4.点击的整行的数据(选中的数据)
(e.target as DataGrid).selectedItem
5.选中的单元格的数据
(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]

完整代码: 

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" width="450" fontFamily="宋体" fontSize="12" height="400"> 
 <mx:Script> 
 <![CDATA[ 
 import mx.controls.*; 
 import mx.events.ListEvent;
 import mx.controls.dataGridClasses.*; 
 private var DataGrid1:DataGrid; 
 
 [Bindable]//原始数据
 public var dataArr:Array = [{id:1,name:"苹果",count:100}, 
 {id:2,name:"西瓜",count:200}, 
 {id:3,name:"水蜜桃",count:50}] 
 
 private function addItem():void{ 
        dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value})
        DataGrid2.dataProvider = dataArr
 } 
 private function delItem():void{ 
        dataArr.pop();
        DataGrid2.dataProvider = dataArr
 } 
 private function itemClick(e:ListEvent):void{
   var txt:String = "表头为: "+(e.target as DataGrid).columns[e.columnIndex].headerText+"/n"
   txt+="选中第 "+e.columnIndex+" 列/n"
   txt+="选中第 "+e.rowIndex+" 行/n"
   txt+="选中的行的数据为:/n"
   var dat:Object = (e.target as DataGrid).selectedItem
   for(var i:* in dat){
     txt+="　"+i+":"+dat[i]+"/n"
   }
   txt+="选中的单元可格的数据为 "+(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]+" /n"
   Alert.show(txt)
   }
 ]]> 
 </mx:Script> 
 
 <mx:DataGrid id="DataGrid2" itemClick="itemClick(event)" dataProvider="{dataArr}" width="430" y="10" x="10" height="208"> 
 <mx:columns> 
 <mx:DataGridColumn headerText="序号" dataField="id"/> 
 <mx:DataGridColumn headerText="名称" dataField="name"/> 
 <mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"/> 
 </mx:columns> 
 </mx:DataGrid> 
 <mx:NumericStepper id="uiId" x="10" y="241" width="150"/>
 <mx:TextInput id="uiName" x="10" y="288" width="150"/>
 <mx:NumericStepper id="uiCount" x="10" y="335" width="150"/>
 <mx:Label x="10" y="224" text="序号："/>
 <mx:Label x="10" y="271" text="名称："/>
 <mx:Label x="10" y="318" text="数量："/>
 <mx:Button click="addItem()" x="10" y="368" label="添加" width="150"/>
 <mx:Button click="delItem()" x="290" y="368" label="删除最后一个" width="150"/>
</mx:Application>

Flex教程/组件详解之一：DataGrid(5)

今天继续介绍一下DataGrid的编辑功能,
编辑状态操作非常简单,只需要设置editable="true",
但需要注意的事,要先设置DataGrid开启全局的编辑功能,
然后再针对DataGridColumn(列)把不需要编辑的列用editable="false"取消编辑功能。

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" width="450" fontFamily="宋体" fontSize="12" height="230"> 
 <mx:Script> 
 <![CDATA[ 
 import mx.controls.*; 
 import mx.events.ListEvent;
 import mx.controls.dataGridClasses.*; 
 private var DataGrid1:DataGrid; 
 
 [Bindable]//原始数据
 public var dataArr:Array = [{id:1,name:"苹果",count:100}, 
 {id:2,name:"西瓜",count:200}, 
 {id:3,name:"水蜜桃",count:50}] 
 ]]> 
 </mx:Script> 
 
 <mx:DataGrid editable="true" id="DataGrid2" 
dataProvider="{dataArr}" width="430" y="10" x="10" height="208"> 
 <mx:columns> 
 <mx:DataGridColumn headerText="序号" dataField="id" editable="false"/> 
 <mx:DataGridColumn headerText="名称" dataField="name"/> 
 <mx:DataGridColumn headerText="数量" dataField="count"/> 
 </mx:columns> 
 </mx:DataGrid> 
</mx:Application> 

Flex教程/组件详解之一：DataGrid(6)

今天我们继续讲DataGrid,介绍一下DataGrid中的itemEditor和itemRenderer.

从字面上的意思,我们可以理解itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是说.itemEditor只会在单元格处理编辑状态下才会出现.而itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列)

我们继续之前应用到的代码.
首先我们看看在mxml中定义itemEditor/itemRenderer的方法.定义代码在columns中进行(表头),只要在相应的列中,设定<mx:itemRenderer>/<mx:itemEditor>,然后选择你需要使用的组件,另外这里要注意的是..设置了itemEditor/itemRenderer的DataGridColumn,需要增加一个editorDataField,相应的填上你选择的组件的属性.如这里..我需要的是NumericStepper的value属性.所以填上editorDataField="value",这样.当NumericStepper修改时..相应的单元格的值就会变成NumericStepper的value属性的值. 

<mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value">
  <mx:itemEditor>
    <mx:Component>
      <mx:NumericStepper maximum="1000" minimum="10">
      </mx:NumericStepper>
    </mx:Component>
  </mx:itemEditor>
</mx:DataGridColumn>

而as的写法..大概跟上面类似.,需要注意的是.用代码设置itemRenderer时.接受的类形是ClassFactory.,如果需要给选择的组件(这里是NumericStepper),需要设置ClassFactory的properties属性.为一个object,我们看看代码 

  col = new DataGridColumn()
  col.headerText = "价格"
  col.dataField = "price"
  col.editable = false
  var itemRenderer:ClassFactory = new ClassFactory(NumericStepper);
  itemRenderer.properties = {maximum:1000,minimum:10}
  col.itemRenderer = itemRenderer
  col.editorDataField = "value"

itemEditor类似这里不说明了

看看完整的代码 

<?xml version="1.0"?>
<mx:Application initialize="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontFamily="宋体" fontSize="12" width="424" height="396">
  <mx:Script>
    <![CDATA[
      import mx.controls.*;
      import mx.controls.dataGridClasses.*;
      private var DataGrid1:DataGrid
      [Bindable]
      public var dataArr:Array = [{id:1,name:"苹果",price:100,count:100},
                    {id:2,name:"西瓜",price:50,count:200},
                    {id:3,name:"水蜜桃",price:333,count:50}]
      private var aaa:Object
      private function init():void{
        DataGrid1 = new DataGrid()
        DataGrid1.editable = true
        DataGrid1.x = 10
        DataGrid1.y = 10
        addChild(DataGrid1)
        crColumn()
        addItem()
      }
      private function crColumn():void{
        var col:DataGridColumn
        
        col = new DataGridColumn()
        col.headerText = "序号"
        col.dataField = "id"
        col.editable = false
        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 = "price"
        col.editable = false
        var itemRenderer:ClassFactory = new ClassFactory(NumericStepper);
        itemRenderer.properties = {maximum:1000,minimum:10}
        col.itemRenderer = itemRenderer
        col.editorDataField = "value"
        DataGrid1.columns = DataGrid1.columns.concat(col)        
        
        
        col = new DataGridColumn()
        col.headerText = "数量"
        col.dataField = "count"
        var itemEditor:ClassFactory = new ClassFactory(NumericStepper);
        itemEditor.properties = {maximum:1000,minimum:10}
        col.itemEditor = itemEditor
        col.editorDataField = "value"
        DataGrid1.columns = DataGrid1.columns.concat(col)
      }
      private function addItem():void{
        DataGrid1.dataProvider = dataArr
      }
    ]]>
  </mx:Script>

  <mx:DataGrid id="DataGrid2" editable="true" dataProvider="{dataArr}" y="200" x="10">
    <mx:columns>
      <mx:DataGridColumn headerText="序号" dataField="id" editable="false"/>
      <mx:DataGridColumn headerText="名称" dataField="name"/>
      <mx:DataGridColumn headerText="价格" dataField="price" editorDataField="value" editable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:NumericStepper maximum="1000" minimum="10">
            </mx:NumericStepper>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value">
        <mx:itemEditor>
          <mx:Component>
            <mx:NumericStepper maximum="1000" minimum="10">
            </mx:NumericStepper>
          </mx:Component>
        </mx:itemEditor>
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>