Adobe Flex迷你教程 — DataGrid,checkbox itemrender以及多行多列值的控制

Posted by Kevin Luo at 2 January 2009

Category: Flex 迷你教程

Tags:

写了一个简单的Demo,目的是帮助大家初步了解itemrender的使用,以及如何对多行数据同时操作。

Demo操作过程

1. DataGrid为3列,第一列是check box.
2. 点击选中多行的check box.
3. 点击删除选中行,所有被选中的行的第三列的值改变为 Deleted.

GridDemo.mxml

public var selectedItems:Array = new Array(); //保存选中行

//将数组中的行的status 改为Delete,并且刷新Grid
private function removeSelectedItems():void{
for(var i:int = 0; i<selectedItems.length; i++){
selectedItems[i].status = “Deleted”;

}
idata.refresh()
}

<mx:DataGrid id=”grid” dataProvider=”{idata}”>
<mx:columns>
<mx:DataGridColumn headerText=”删除” dataField=”action” itemRenderer=”{new ClassFactory(iCheckBox)}” />
<mx:DataGridColumn headerText=”姓名” dataField=”name” />
<mx:DataGridColumn headerText=”状态” dataField=”status” />

</mx:columns>
</mx:DataGrid>

iCheckBox.as (ItemRender)

override public function set data(value:Object):void{
if(value.action.toString() == “true”){ //如果action为true,选中check box
this.selected = true;
Application.application.selectedItems.push(value) //将选中的数据保存起来
}else{
this.selected = false;
}
this.currentData = value; //保存整行的引用
}

//点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除
private function changeHandle(e:Event):void{
var itemArray:Array = Application.application.selectedItems
this.currentData.action = this.selected.toString()
if(this.selected){
itemArray.push(this.currentData)
}else{
for(var i:int = 0; i<itemArray.length; i++){
if(itemArray[i] == this.currentData){
itemArray.splice(i,1)
}
}
}
}

grid2

GirdDemo.zip是上面的例子。
GridDemo1.zip是修改了checkBox为不在dataProvider中的column

2 Comments

  1. tianzhu2008 says

    学习了,初学者,谢楼主了

    Reply

  2. 幽幽 says

    flex4.0中怎样用datagrid调用xmllist里的数据

    Reply

Leave a Reply

Leave a Reply
  • (required)
  • (required) (will not be published)