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>