`

FLEX 中的DataGrid使用(转)

 
阅读更多

 

原文地址:http://blog.csdn.net/lihua2915/article/details/5856029

 

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

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

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

建立DataGrid
我们先来介绍一下建立DataGrid,分别从mxmlactionscript
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的列.我们也从mxmlactionscript两头进行:
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,然后添加到DataGridcolumns属性里(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).

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

 

 

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

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

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

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

当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
(ps:
下边提到的eListEvent事件对象..)
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中的itemEditoritemRenderer.

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

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

<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),需要设置ClassFactoryproperties属性.为一个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>

分享到:
评论

相关推荐

    flex中dataGrid导出数据到excel中

    flex中dataGrid导出数据到excel中,不存在乱码问题

    Flex的DataGrid中使用CheckBox

    Flex的DataGrid中使用CheckBox. 大家共同研究

    FLEX的datagrid合计、平均值

    本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 首先,我们要了解Flex的Datagrid组件的基本结构。Datagrid通常与数据提供者绑定,如ArrayCollection或...

    Flex4 DataGrid控件行编辑项目

    在DataGrid中实现光标定位,可以监听键盘事件,根据用户的上下左右键输入来改变当前选中行或单元格。这可能需要对DataGrid的selectedItem或selectedIndex属性进行操作。 六、运行项目 提供的项目名为"DataGridTest...

    flex 自定义 datagrid 列头带组合框进行过滤

    通过以上步骤,我们可以在Flex的DataGrid中实现自定义列头带有组合框的过滤功能,使得用户能够更直观、方便地筛选数据。这种自定义组件的方式不仅增强了组件的灵活性,也提供了更好的交互性,提高了应用的可用性。在...

    Flex Datagrid checkbox实现

    在标题“Flex Datagrid checkbox实现”中,讨论的核心是Datagrid中集成复选框(checkbox)的功能。 在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小...

    在flex的dataGrid控件中显示图片的实践

    本文将深入探讨如何在DataGrid中显示图片,特别是在与Spring、Hibernate和Struts等框架集成的背景下,如何处理二进制数据并将其在Flex前端呈现。 首先,让我们了解Flex的基本概念。Flex是一个基于ActionScript和...

    Flex4 DataGrid表格操作

    Flex4 DataGrid表格操作,表格回车事件默认是换行,这里修改为换单元格,单元格轮完换行。支持上下左右和回车键控制光标位置,还添加了"+","-"按钮,用于控制添加行和删除选中的行。

    flex DataGrid 表头分组

    在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的常用组件。它允许用户以表格的形式查看和操作数据。当我们处理的数据需要进行分类或者分组时,Flex DataGrid 提供了表头分组的功能,这使得数据的展示...

    flex datagrid 前台 分页

    Flex DataGrid是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...

    在Flex的DataGrid中使用CheckBox

    ### 在Flex的DataGrid中使用CheckBox #### 一、引言 在Flex应用程序开发中,DataGrid 是一种常用的UI组件,用于展示数据列表,并提供了一系列的功能,如排序、过滤等。有时,为了增加用户交互性或实现特定功能,...

    flex下拉dataGrid

    4. **关闭处理**:当用户在DataGrid中做出选择后,需要更新ComboBox的选中项,并关闭下拉部分。 5. **样式定制**:可以根据需要调整控件的外观,如颜色、字体、边框等,使其与应用的UI风格保持一致。 在实际开发中...

    Flex中DataGrid和其它控件使用

    1. **LabelField**:DataGrid中的每个单元格默认显示的是数据源中的简单文本,但有时我们可能需要自定义显示内容,这时可以使用LabelField或LabelFunction来实现。 2. **ButtonColumn**:如果需要在DataGrid中添加...

    将Flex DataGrid数据导出到Excel中

    在开发基于Adobe Flex的应用程序时,我们经常遇到需要将数据展示在用户友好的方式中,例如使用DataGrid组件。然而,有时用户希望将这些数据显示在更传统的格式中,如Microsoft Excel电子表格。本教程将详细介绍如何...

    Flex中组件datagrid导出Excel

    5. **文件下载**:在Flex中,我们可以使用`FileReference`类来实现文件的下载。创建好XML文件后,通过`FileReference.save()`方法,指定文件名和内容,触发浏览器的下载对话框,让用户保存生成的Excel文件。 6. **...

    Flex-DataGrid使用关键字过滤结果

    本文将深入探讨如何利用关键词对Flex DataGrid中的数据进行过滤,以实现更高效的用户数据查找。 首先,我们需要理解Flex DataGrid的过滤机制。DataGrid本身并不直接支持关键字过滤,但可以通过自定义控件和事件监听...

    flex 把datagrid的内容导出到Excel

    总的来说,通过使用As3Xls库,Flex开发者可以方便地将Datagrid中的数据导出到Excel文件,满足用户的多种需求。虽然这个过程涉及到一些编码工作,但有了这个工具,你可以在不依赖服务器端的情况下实现客户端直接导出...

    Flex中DataGrid分页源码

    本文将详细解析使用AS3.0在Flex中实现DataGrid分页的功能,帮助你深入理解这一技术。 首先,Flex是Adobe开发的一个开放源代码框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括DataGrid,这是一...

    Flex FooterSpark DataGrid 表格制作

    Flex FooterSpark DataGrid 是Adobe Flex框架中用于创建高级数据展示组件的一个重要工具,它在桌面和Web应用中广泛用于数据网格的展示。Flex是基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。...

Global site tag (gtag.js) - Google Analytics