使用flex DataGrid组件
在web开发中grid需要第三方js API，flex内置了丰富的组件，其中包括DataGrid，开发变得很简单。
这是一个最简单的DataGrid，静态的列出用户信息。可以按列排序，编辑每个数据项。
mxml代码：
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="10" y="10" width="431" height="345" layout="absolute" title="用户列表" fontSize="12"> <mx:DataGrid x="10" y="10" width="391" height="285" editable="true"> <mx:Array> <mx:Object userId="1" name="张三" birthday="1999-1-1" /> <mx:Object userId="2" name="李四" birthday="1998-2-2" /> </mx:Array> <mx:columns> <mx:DataGridColumn headerText="ID" dataField="userId"/> <mx:DataGridColumn headerText="姓名" dataField="name"/> <mx:DataGridColumn headerText="生日" dataField="birthday"/> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:Application>
这是最简单的使用方式，常用的是通过AS3动态加载的方式。下面在mxml中嵌入了AS3代码，用来创建一个保存用户集合的Array（相当于Java中的List），然后绑定到DataGrid对象上，最后像html加载js一样，设置加载mxml时初始化该Array和DataGrid的绑定。代码如下：
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; private var myColl:ArrayCollection; private var users:Array=[ {id:'1',name:'张三',birthday:'1999-1-1'}, {id:'2',name:'李四',birthday:'1998-2-2'} ]; private function init():void{ myColl=new ArrayCollection(users); myGrid.dataProvider=myColl; } ]]> </mx:Script> <mx:Panel x="10" y="10" width="431" height="139" layout="absolute" title="用户列表" fontSize="12"> <mx:DataGrid id="myGrid" x="10" y="10" width="391" height="82" editable="true"> <mx:columns> <mx:DataGridColumn headerText="ID" dataField="id"/> <mx:DataGridColumn headerText="姓名" dataField="name"/> <mx:DataGridColumn headerText="生日" dataField="birthday"/> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:Application>
这篇文章上的评论的 RSS feed TrackBack URI
