flex_可编辑表格示例;

来源：互联网发布：数据查询网站cnn 编辑：程序博客网时间：2024/04/29 19:50

=>TheEditableGridItemEditor(自定义组件)

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

   <fx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;
           import mx.events.ListEvent;

           [Bindable]
           private var arrayForCombo:ArrayCollection = new ArrayCollection([
               {type: "军阀"},
               {type: "雇佣兵"}
           ]);

           [Bindable]
           public var personType:String;   // 应该用于存储修改了的值。

           private function init():void
           {
               personType = data.type;   // data为datagrid行信息；

               for(var i:int=0, len:int=arrayForCombo.length; i<len; i++) {
                   if(arrayForCombo[i].type == data.type) {
                       combo.selectedIndex = i;   // 让combobox显示对应的数据。
                   }
               }
           }

           protected function combo_changeHandler(event:ListEvent):void
           {
               personType = combo.selectedItem.type;
           }

       ]]>
   </fx:Script>

   <fx:Declarations>
       
   </fx:Declarations>

   
   <mx:ComboBox id="combo" dataProvider="{arrayForCombo}" labelField="type" change="combo_changeHandler(event)"/>
</mx:HBox>

=>TheEditableGrid(应用程序)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600" pageTitle="可编辑表格示例">
   <fx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;

           [Bindable]
           private var arrayForGrid:ArrayCollection = new ArrayCollection([
               {name: "唐龙", age: 23, email: "23@lf.com", type: "军阀"},
               {name: "楚源", age: 11, email: "11@lf.com", type: "雇佣兵"},
               {name: "猴子", age: 12, email: "12!lf.com", type: "雇佣兵"}
           ]);
       ]]>
   </fx:Script>

   <fx:Declarations>
       
   </fx:Declarations>

   
   <mx:DataGrid id="dgrid" dataProvider="{arrayForGrid}" editable="true" width="350" height="120"
               verticalCenter="0" horizontalCenter="0">
       <mx:columns>
           <mx:DataGridColumn headerText="姓名" dataField="name"/>
           <mx:DataGridColumn headerText="年龄" dataField="age"/>
           <mx:DataGridColumn headerText="邮箱地址" dataField="email" editable="false"/>
           <mx:DataGridColumn headerText="身份" dataField="type" editorDataField="personType"
                               itemEditor="TheEditableGridItemEditor"/>
       </mx:columns>
   </mx:DataGrid>

</s:Application>