Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple custom MXML TitleWindow component.
     The TitleWindowApp application displays this component.
     You cannot run it independently. -->
    
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    title="个人信息"  width="682" height="438"
    showCloseButton="true" close="closeHandler();"
    borderColor="#00BEFF" cornerRadius="0"
    layout="absolute" x="200" y="100"  fontSize="14"
    xmlns:components="*" creationComplete="init()" >
    <mx:Script>
     <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.collections.XMLListCollection;
      import mx.managers.PopUpManager;
      import mx.controls.Alert;
      public var comBoxXML: XML =
     <list>
       <way>手机</way>
       <way>邮箱</way>
     </list>;
        [Bindable]
     public var comBox:XMLListCollection=new XMLListCollection(comBoxXML.way);
      [Bindable]
      private var dataArr:ArrayCollection=new ArrayCollection();
      var item1:Object={way:"手机",add:"1396907****"};
      var item2:Object={way:"邮箱",add:"************"};
      private function init():void
      {
       dataArr.addItem(item1);
       dataArr.addItem(item2);
      }
      /**
      * 关闭窗口
       */
   public function closeHandler():void
   {
    // isOpObj=false;
    PopUpManager.removePopUp(this);
   }
   
   
   import mx.collections.ArrayCollection;
   public var index:Number;
   //自动显示行号中得到行号
   private function getLineNum(item:Object,num:int):String{
    index = dataArr.getItemIndex(item)+1;
    return String(index);
   }
   //增加一条记录
   private  function addRecord():void
   {
    //Alert.show("add");
    var item3:Object={};
    dataArr.addItem(item3);
    dg.dataProvider=dataArr;
    
   }
   //删除一条记录
   private function deleteRecord():void
   {
    //Alert.show("reduce");
    var item4:Object=dg.selectedItem;
    var index:int=dataArr.getItemIndex(item4);
    dataArr.removeItemAt(index);
    dg.dataProvider=dataArr;
   }
   //保存信息
   private function saveInfo():void
   {
    //当dataGrid输入有改变的时候,会自动反写到dataProvider中
    var index:int=dataArr.length;
    //dataArr.removeAll();
    Alert.show(index.toString());
    for(var i=0;i<index;i++){
     //var obj:Object=dg.getChildAt(i);
     Alert.show(dataArr.getItemAt(i).way);
     
    }
    
   }
     ]]>
    </mx:Script>
  
    <mx:Label x="20" y="35" text="个人信息:" fontSize="12"/>
    <mx:Label x="20" y="88" text="账号:" fontSize="12"/>
    <mx:Label x="281" y="88" text="姓名:" fontSize="12"/>
    <mx:HBox x="20" y="10" width="632">
        <mx:Spacer width="100%" height="100%"/>
        <mx:Button label="保存" click="saveInfo();" fontSize="12" />
        <mx:Button label="取消" click="closeHandler();" fontSize="12"/>
    </mx:HBox>
    <mx:Label x="20" y="129" text="性别:" fontSize="12"/>
    <mx:RadioButton x="83" y="127" label="男" fontSize="12"/>
    <mx:RadioButton x="139" y="127" label="女" fontSize="12"/>
    <mx:RadioButton x="194" y="127" label="未知" fontSize="12"/>
    <mx:Label x="281" y="129" text="生日:" fontSize="12"/>
    <mx:ComboBox x="348" y="124" width="60"></mx:ComboBox>
    <mx:ComboBox x="446" y="124" width="53"></mx:ComboBox>
    <mx:ComboBox x="537" y="124" width="57"></mx:ComboBox>
    <mx:Label x="416" y="129" text="年" fontSize="12"/>
    <mx:Label x="507" y="129" text="月" fontSize="12"/>
    <mx:Label x="602" y="129" text="日" fontSize="12"/>
    <mx:TextInput x="83" y="84" editable="false"/>
    <mx:TextInput x="348" y="84"/>
    <mx:DataGrid id="dg" x="20" y="157" width="632" height="191" editable="true" dataProvider="{dataArr}" >
        <mx:columns>
            <mx:DataGridColumn headerText="序号" dataField="num" labelFunction="getLineNum" editable="false" />
            <mx:DataGridColumn headerText="联系方式" dataField="way" editorDataField="value" >
            <mx:itemEditor>
        <mx:Component>
       <mx:HBox>
          <mx:Script>
         <![CDATA[
             public function get value():Object
             {
            if(cmb.selectedItem == null)
             return null;
            var item1 :XML = cmb.selectedItem as XML;
            var method1 : String = item1.children()[0]; //联系方式
               data.way = method1;     // data DataGrid上面的当前行的数据
            return method1;
             }
             override public function set data(value:Object):void
             {
            //必须要给data复制,否则会导致程序崩溃
            super.data=value;
            //给combobox赋初始值
            for each(var item1 :XML in cmb.dataProvider)
            {
               trace(item1.children()[0]);
               var method2 : String = item1.children()[0];
                if(method2 == value.way){  //value DataGrid上面的当前行的数据
                cmb.selectedItem=item1;
                }
            }
             }
             //下面的 {outerDocument}标识引用外部的数据  在这里写注释比较方便:)
         ]]>
           </mx:Script>
           <mx:ComboBox id="cmb" labelField="方式" width="100%" dataProvider="{outerDocument.comBox}" />
        </mx:HBox>
        </mx:Component>
     </mx:itemEditor>
         </mx:DataGridColumn>
            <mx:DataGridColumn headerText="联系地址" dataField="add"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:HBox x="20" y="356" width="632">
        <mx:Spacer width="100%" height="100%"/>
        <mx:Button label="增加" click="addRecord();" width="54" fontSize="12"/>
        <mx:Button label="删除" click="deleteRecord();" fontSize="12"/>
    </mx:HBox>
</mx:TitleWindow>

 

注意:这个文件是TitleWindow,把它作为一个弹出窗口运行,或者改成Application。

你可能感兴趣的:(datagrid,object,function,Flex,import,RadioButton)