`

操作Flex中的DataGrid,并放入TextInput编辑

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" viewSourceURL="srcview/index.html">
   
   <mx:DataGrid id="myDG" dataProvider="{customers}" rowCount="5" width="300" height="200" editable="true">
      <mx:columns>
         <mx:DataGridColumn headerText="Name" width="100" dataField="name" editable="false" editorDataField="text">
            <mx:itemRenderer>
               <mx:Component>
                  <mx:HBox horizontalScrollPolicy="off">
                     <mx:Label text="{data.name}" />
                     <mx:Spacer width="100%" />
                     <mx:Label text="+" click="outerDocument.editCell(0)" toolTip="Edit" />
                  </mx:HBox>
               </mx:Component>
            </mx:itemRenderer>
            <mx:itemEditor>
               <mx:Component>
                  <mx:TextInput text="{data.name}" />
               </mx:Component>
            </mx:itemEditor>
         </mx:DataGridColumn>
         
         <mx:DataGridColumn headerText="Addresss" dataField="address" width="200" editable="false" editorDataField="text">
            <mx:itemRenderer>
               <mx:Component>
                  <mx:HBox horizontalScrollPolicy="off">
                     <mx:Label text="{data.address}" />
                     <mx:Spacer width="100%" />
                     <mx:Label text="+" click="outerDocument.editCell(1)" toolTip="Edit" />
                  </mx:HBox>
               </mx:Component>
            </mx:itemRenderer>
            <mx:itemEditor>
               <mx:Component>
                  <mx:TextInput text="{data.address}" />
               </mx:Component>
            </mx:itemEditor>
         </mx:DataGridColumn>
      </mx:columns>
   </mx:DataGrid>
   
   <mx:Model id="custdata">
      <customers>
         <customer>
            <name>Cust1</name>
            <address>Address1</address>
         </customer>
         <customer>
            <name>Cust2</name>
            <address>Address2</address>
         </customer>
         <customer>
            <name>Cust3</name>
            <address>Address3</address>
         </customer>      
      </customers>
   </mx:Model>   

   <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         
         [Bindable] private var customers:ArrayCollection = new ArrayCollection();

         private function init():void {
            customers = new ArrayCollection(custdata.customer);
         }
         
         public function editCell(column:Number):void {
            myDG.editedItemPosition = {columnIndex:column, rowIndex:myDG.selectedIndex}
         }
      ]]>
   </mx:Script>

</mx:Application>

 

0
1
分享到:
评论

相关推荐

    flex中dataGrid导出数据到excel中

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

    Flex4 DataGrid控件行编辑项目

    在Flex4.6中,DataGrid支持两种编辑模式:cell editing(单元格编辑)和row editing(行编辑)。这个项目主要涉及后者,允许用户一次编辑整行数据。 二、ComboBox控件嵌入 ComboBox控件是一个下拉列表选择框,用户...

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

    Flex4 DataGrid表格操作

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

    Flex的DataGrid中使用CheckBox

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

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

    在Flex开发中,数据网格(DataGrid)是一种常用的组件,用于展示结构化的数据。当我们需要在列头上添加更丰富的交互功能,例如组合框(ComboBox)来进行过滤操作时,就需要自定义列头。这个主题——"flex 自定义 ...

    flex下拉dataGrid

    在Flex中,下拉控件(Dropdown)通常由ComboBox或List控件实现,而数据网格(DataGrid)则用于显示和操作结构化的表格数据。要实现“带dataGrid的自定义下拉控件”,我们需要对这两个组件进行组合和定制,创建一个...

    Flex创建可编辑以及分页的DataGrid

    在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等功能,极大地增强了用户界面的交互性。本篇文章将深入探讨如何在Flex中创建一个既可编辑又...

    flex datagrid 前台 分页

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

    Flex Datagrid checkbox实现

    Flex Datagrid 是Adobe Flex框架中用于展示数据集的组件,它允许开发者以表格形式展示数据,并提供多种交互功能。在Flex应用中,Datagrid经常被用于处理和展示大量的结构化数据。在标题“Flex Datagrid checkbox实现...

    flex DataGrid 表头分组

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

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

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

    Flex-DataGrid源码及资料

    Flex DataGrid是一款在Adobe Flex开发环境中广泛使用的组件,主要用于展示和操作大量结构化的数据。它是一种灵活的表格视图,可以轻松地实现数据的排序、筛选、分页等功能。在这个"Flex-DataGrid源码及资料"的压缩包...

    Flex中Datagrid应用(每行修改删除按钮)

    在Flex中,DataGrid是一种常用的组件,用于展示和操作数据集。它允许用户以表格的形式查看和编辑数据,常用于创建数据驱动的应用程序。本文将深入探讨如何在Flex的DataGrid中实现每行的修改和删除功能,以及相关源码...

    flex datagrid

    Flex DataGrid 是 Adobe Flex 中一个重要的组件,用于展示结构化数据。它以表格形式呈现,非常适合用来显示多列数据,并提供了排序、选择、编辑等多种功能。在这个教程中,我们将深入探讨 DataGrid 的基本使用和一些...

    Flex中组件datagrid导出Excel

    总结起来,Flex中组件DataGrid的数据导出至Excel是一项涉及组件操作、数据处理、XML序列化和文件下载等多方面技术的任务。通过理解并掌握这些知识点,开发者可以为用户提供便捷的数据导出功能,提高用户体验。在具体...

    将Flex DataGrid数据导出到Excel中

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

    Flex FooterSpark DataGrid 表格制作

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

    Flex动态创建DataGrid设置图片

    本教程主要聚焦于如何在Flex中动态创建DataGrid,并向其中添加图片,这在创建交互式、富媒体应用时非常有用。通过以下两种方法,你可以实现这个功能。 ### 方法一:使用ItemRenderer 1. **定义ItemRenderer**: ...

Global site tag (gtag.js) - Google Analytics