Flex 实践——在 Datagrid中及时显示Array的数据变化
刚才花了两个小时研究了一下如何在Datagrid 显示Array 的数据时能动态反应Array 数据的变化。在这里，把研究的结果和大家一起分享。。。。
Test. mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#F3CBCB, #E9EE9A]" fontSize="15"> <mx:states> <mx:State name="result"> <mx:RemoveChild target="{canvas1}"/> <mx:AddChild position="lastChild"> <mx:DataGrid x="290" y="52" width="570" height="260" id="dg" dataProvider="{pArray}"> <mx:columns> <mx:DataGridColumn headerText="Pizza名称" dataField="name"/> <mx:DataGridColumn headerText="尺寸" dataField="size"/> <mx:DataGridColumn headerText="单价" dataField="price"/> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Button x="539" y="402" label="继续购买" click="currentState="""/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="261" y="337" text="Pizza名称："/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="358" y="337" text="{dg.selectedItem.name}" width="127" id="itemName"/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="487" y="337" text="尺寸："/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="545" y="337" text="{dg.selectedItem.size}" width="96" id="itemSize"/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="659" y="337" text="单价："/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Label x="717" y="337" text="{dg.selectedItem.price}" width="107" id="itemPrice"/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Button x="832" y="335" label="删除" click="collectInfo1()"/> </mx:AddChild> </mx:State> <mx:State name="deleteSuccess"> <mx:RemoveChild target="{canvas1}"/> <mx:AddChild position="lastChild"> <mx:Label x="461" y="187" text="该项删除成功！"/> </mx:AddChild> <mx:AddChild position="lastChild"> <mx:Button x="480" y="246" label="返回" click="currentState="result""/> </mx:AddChild> </mx:State> </mx:states> <mx:Script source="myScript.as"/> <mx:Script> <![CDATA[ import Class.*; private function collectInfo(pname:String,psize:String,pPrice:String):void{ var pizza:Pizza=new Pizza(); pizza.setName(pname); pizza.setSize(int(psize)); pizza.setPrice(Number(pPrice)); addPizza(pizza); } private function collectInfo1():void{ var pizza:Pizza=new Pizza(); pizza.setName(itemName.text); pizza.setSize(int(itemSize.text)); pizza.setPrice(Number(itemPrice.text)); deletePizza(pizza); } ]]> </mx:Script> <mx:Canvas x="188.5" y="97" width="670" height="404" id="canvas1"> <mx:Image x="23" y="10" source="../image/pizza1.jpg" width="242" height="208"/> <mx:Label x="117" y="281" text="意大得披萨" fontSize="15" id="pname"/> <mx:Label x="23" y="318" text="单价："/> <mx:Label x="81" y="318" text="30" id="pPrice"/> <mx:Label x="114" y="318" text="元/块"/> <mx:Label x="457" y="318" text="元/块"/> <mx:Label x="182" y="318" text="尺寸："/> <mx:Label x="515" y="318" text="尺寸："/> <mx:Label x="273" y="318" text="寸"/> <mx:Label x="607" y="318" text="寸"/> <mx:Label x="240" y="318" text="13" id="psize"/> <mx:Button x="139" y="350" label="购买" click="collectInfo(pname.text,psize.text,pPrice.text)"/> <mx:Button x="441" y="350" label="购买" click="collectInfo(pname2.text,psize2.text,pPrice2.text)"/> <mx:Image x="334" y="10" source="../image/Moric.jpg" width="231" height="253"/> <mx:Label x="411" y="281" text="墨西哥披萨" id="pname2"/> <mx:Label x="366" y="318" text="单价："/> <mx:Label x="424" y="318" text="40" id="psize2"/> <mx:Label x="561" y="318" text="12" id="pPrice2"/> </mx:Canvas>
</mx:Application>
myScript.as
import Class.*; import mx.controls.Alert; public var pArray:Array=new Array(); public function addPizza(pizza:Pizza):void{ var obj:Object=new Object(); obj.name=pizza.getName(); obj.size=pizza.getSize(); obj.price=pizza.getPrice(); pArray.push(obj); currentState="result"; } public function deletePizza(pizza:Pizza):void{ var sign:String="1"; for(var i:Number=0;i<pArray.length;i++){ if(pArray[i].name==pizza.getName()){ sign="0"; pArray.splice(i,1); break; } } if(sign=="0"){ currentState="deleteSuccess"; }else if(sign=="1"){ Alert.show("您没有订购"+pizza.getName()); } }
Pizza.as（放在了Class包下）
package Class { public class Pizza { private var name:String; private var size:int; private var price:Number; public function Pizza() { } public function setName(name:String):void{ this.name=name; } public function setSize(size:int):void{ this.size=size; } public function setPrice(price:Number):void{ this.price=price; } public function getName():String{ return name; } public function getSize():int{ return size; } public function getPrice():Number{ return price; } } }
运行结果：