1, design ideas
(1) Create a new DataGrid and add three buttons to the last column: Add, modify, and delete;
(2) Click the New button, you can add a row to the table;
(3) Click the "Modify" button, you can modify some of the rows in the table properties;
(4) Click the Delete button to delete the row in the table.
2. Implementation steps
(1) Create a new application, Datagrid.mxml
Datagrid.mxml:
Copy Code code as follows:
<?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= ">"
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!--place non-visual elements (such as services, value objects) here-->
</fx:Declarations>
<fx:Script>
<! [cdata[
Import mx.collections.ArrayCollection;
[bindable]
Table Data Source Bindings
private var grid:arraycollection = new ArrayCollection ([
{number: "2014010101", Name: "John", Sex: "Male", Age: "19"},
{number: "2014010102", Name: "Li si", Sex: "Female", Age: "20"},
{number: "2014010103", Name: "Chamber-of-commerce", Sex: "Male", Age: "21"},
{number: "2014010104", Name: "The ear of the Ox", Sex: "Female", Age: "22"},
{number: "2014010105", Name: "Mega Division", Sex: "Male", Age: "18"},
{number: "2014010106", Name: "Huliu", Sex: "Female", Age: "19"},
{number: "2014010107", Name: "Liu Shi", Sex: "Male", Age: "20"},
{number: "2014010108", Name: "Sun Yang", Sex: "Female", Age: "22"},
{number: "2014010109", Name: "Zheng", Sex: "Male", Age: "21"},
{number: "2014010110", Name: "Wang Xue", Sex: "Female", Age: "20"},
{number: "2014010111", Name: "Huliu", Sex: "Female", Age: "19"},
{number: "2014010112", Name: "Liu Shi", Sex: "Male", Age: "20"},
{number: "2014010113", Name: "Sun Yang", Sex: "Female", Age: "22"},
{number: "2014010114", Name: "Zheng", Sex: "Male", Age: "21"},
{number: "2014010115", Name: "Wang Xue", Sex: "Female", Age: "20"}
]);
]]>
</fx:Script>
<mx:vbox width= "100%" height= "100%" paddingbottom= "a" paddingleft= "" "paddingright=" "paddingtop=" ">
<mx:datagrid id= "DataGrid" dataprovider= "{grid}" rowcount= "{grid.length+1}" width= "100%" textalign= "Center" >
<mx:columns>
<mx:datagridcolumn headertext= "number" id= "datafield=" Stunumber
<mx:datagridcolumn headertext= "name" datafield= "name"/>
<mx:datagridcolumn headertext= "gender" datafield= "sex"/>
<mx:datagridcolumn headertext= "Age" datafield= "ages"/>
<mx:datagridcolumn headertext= "Operations" >
<mx:itemRenderer>
<fx:Component>
<mx:hbox width= "100%" paddingleft= ">"
<fx:Script>
<! [cdata[
Import Mx.managers.PopUpManager;
/* Add button event function/*
protected function AddHandler (event:mouseevent): void
{
var Childwindow:childwindow = ChildWindow (Popupmanager.createpopup (this,childwindow,true));
var point:point = new Point (100,100);
childwindow.x = Point.x + 400;
CHILDWINDOW.Y = Point.y + 50;
}
/* Modify button Event function * *
protected function Updatehandler (event:mouseevent): void
{
var Updatewindow:updatewindow = UpdateWindow (Popupmanager.createpopup (this,updatewindow,true));
var point:point = new Point (100,100);
updatewindow.x = Point.x + 400;
UPDATEWINDOW.Y = Point.y + 50;
Updatewindow.stuno = event.currentTarget.selectedItem.content;
}
]]>
</fx:Script>
<mx:linkbutton label= "Add" click= "AddHandler (event)"/>
<s:label width= "Ten"/>
<mx:linkbutton label= "Modify" click= "Updatehandler (event)"/>
<s:label width= "Ten"/>
<mx:linkbutton label= "Delete"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</s:Application>
(2) Create a new new window component, Childwindow.mxml
Childwindow.mxml:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<s:titlewindow xmlns:fx= "http://ns.adobe.com/mxml/2009"
Xmlns:s= "Library://ns.adobe.com/flex/spark"
"Library://ns.adobe.com/flex/mx" width= "xmlns:mx=" height= "300"
Close= "Closehandler (event)" title= "Add Window" >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<! [cdata[
Import mx.events.CloseEvent;
Import Mx.managers.PopUpManager;
/* Close button function * *
protected function Closehandler (event:closeevent): void
{
Popupmanager.removepopup (this);
}
/* Cancel Button function * *
protected function Cancelhandler (event:mouseevent): void
{
Popupmanager.removepopup (this);
}
]]>
</fx:Script>
<fx:Declarations>
<!--place non-visual elements (such as services, value objects) here-->
</fx:Declarations>
<mx:vbox width= "100%" height= "100%" horizontalalign= "Center" >
<mx:form borderstyle= "solid" bordercolor= "#CCCCCC" width= "100%" >
<mx:formheading label= "New Interface" fontsize= "/>"
<mx:formitem label= "School No.:" >
<s:textinput id= "Stuno" width= "/>"
</mx:FormItem>
<mx:formitem label= "Name:" >
<s:textinput id= "stuname" width= "/>"
</mx:FormItem>
<mx:formitem label= "Sex:" >
<s:textinput id= "stusex" width= "/>"
</mx:FormItem>
<mx:formitem label= "Age:" >
<s:textinput id= "stuage" width= "/>"
</mx:FormItem>
</mx:Form>
<mx:hbox width= "100%" height= ">"
<s:label width= "/>"
<s:button label= "New"/>
<s:label width= "/>"
<s:button label= "Cancel" click= "Cancelhandler (event)"/>
</mx:HBox>
</mx:VBox>
</s:TitleWindow>
(3) A new modified interface component, Updatewindow.mxml
Updatewindow.mxml:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<s:titlewindow xmlns:fx= "http://ns.adobe.com/mxml/2009"
Xmlns:s= "Library://ns.adobe.com/flex/spark"
"Library://ns.adobe.com/flex/mx" width= "xmlns:mx=" height= "300"
Close= "Closehandler (event)" title= "Modify Window" >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<! [cdata[
Import mx.events.CloseEvent;
Import Mx.managers.PopUpManager;
/* Close button function * *
protected function Closehandler (event:closeevent): void
{
Popupmanager.removepopup (this);
}
/* Cancel Button function * *
protected function Cancelhandler (event:mouseevent): void
{
Popupmanager.removepopup (this);
}
]]>
</fx:Script>
<fx:Declarations>
<!--place non-visual elements (such as services, value objects) here-->
</fx:Declarations>
<mx:vbox width= "100%" height= "100%" horizontalalign= "Center" >
<mx:form borderstyle= "solid" bordercolor= "#CCCCCC" width= "100%" >
<mx:formheading label= "Modify Interface" fontsize= "/>"
<mx:formitem label= "School No.:" >
<s:textinput id= "Stuno" width= "/>"
</mx:FormItem>
<mx:formitem label= "Name:" >
<s:textinput id= "stuname" width= "/>"
</mx:FormItem>
<mx:formitem label= "Sex:" >
<s:textinput id= "stusex" width= "/>"
</mx:FormItem>
<mx:formitem label= "Age:" >
<s:textinput id= "stuage" width= "/>"
</mx:FormItem>
</mx:Form>
<mx:hbox width= "100%" height= ">"
<s:label width= "/>"
<s:button label= "Modify"/>
<s:label width= "/>"
<s:button label= "Cancel" click= "Cancelhandler (event)"/>
</mx:HBox>
</mx:VBox>
</s:TitleWindow>
3. Design result
(1) When initializing
