flex的datagrid中动态绑定按钮
显示DataGrid的界面xml
-------------------------------------------
[Bindable]
var array:ArrayCollection=new ArrayCollection({paperId:"12321321",paperName:"测试试卷",source:"三年一班自测卷",userScore:"80","2011-11-11 13:25"});
<paging:CheckBoxDataGrid width="880" height="300" id="finishedExam" dataProvider="{array}" horizontalScrollPolicy="off"
allowMultipleSelection="false" verticalScrollPolicy="off">
<paging:columns>
<mx:DataGridColumn dataField="id" headerText="请勾选" width="20"
sortable="false" itemRenderer="fx.util.CheckBoxRenderer" headerRenderer="fx.util.CheckBoxHeaderRenderer" >
</mx:DataGridColumn>
<mx:DataGridColumn headerText="试卷名称" dataField="paperName" width="220"/>
<mx:DataGridColumn headerText="来源" dataField="source" width="180"/>
<mx:DataGridColumn headerText="得分" dataField="userScore" width="50"/>
<mx:DataGridColumn headerText="做卷时间" dataField="finalTime" width="150"/>
<mx:DataGridColumn headerText="操作" dataField="id" itemRenderer="fx.view.ExamOperationView">
</mx:DataGridColumn>
</paging:columns>
</paging:CheckBoxDataGrid>
说明：CheckBoxDataGrid源自网络找到的资料，而<paging: 则由自己在容器中定义 xmlns:paging="fx.util.*"，参看xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
---------------------------------------------------
绑定按钮的界面fx.view.ExamOperationView.mxml
----------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()"
width="228" height="22">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.adobe.cairngorm.CairngormUtil;
import mx.binding.utils.BindingUtils;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Spacer;
/**
*
* @param id 成绩ID
* @param paperid 试卷ID
**/
public function viewThisExam(event:MouseEvent):void{
Alert.show("成绩ID="+data.id+" 试卷ID="+data.paperId);
}
/**
*
* @param id 成绩ID
* @param paperid 试卷ID
**/
public function redoThisExam(event:MouseEvent):void{
Alert.show("成绩ID="+data.id+" 试卷ID="+data.paperId);
}
/**
* 动态创建组件
**/
public function init():void{
//1.创建对象
var viewbtn:Button=new Button();
var redobtn:Button=new Button();
var delbtn:Button=new Button();
var spacer:Spacer=new Spacer();
//2.设定属性
viewbtn.id="view_"+data.id;
viewbtn.label="查看";
redobtn.id="redo_"+data.id;
redobtn.label="重做";
delbtn.id="del_"+data.id;
delbtn.label="删除";
//3.绑定事件监听
viewbtn.addEventListener(MouseEvent.CLICK,viewThisExam);
redobtn.addEventListener(MouseEvent.CLICK,redoThisExam);
delbtn.addEventListener(MouseEvent.CLICK,function(event:MouseEvent):void{
var params:Object={resultid:data.id,button:delbtn};
CairngormUtil.event("DeleteCD",params);
});
//4.将对象添加到指定容器中,hbox为某mx:HBox的ID
hbox.addChild(spacer);
hbox.addChild(viewbtn);
hbox.addChild(redobtn);
hbox.addChild(delbtn);
}
]]>
</fx:Script>
<mx:HBox id="hbox" width="100%" height="100%">
</mx:HBox>
</mx:HBox>
------------------------------------------------
下面附上CheckBoxDataGrid.as、CheckBoxHeaderRenderer.as、CheckBoxRenderer.as、CheckBoxList.as四个文件
这四个文件源自网络、具体地址已经遗忘
------------------------------------------------
CheckBoxDataGrid.as
---------------------------
package fx.util
{
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer;
/**
* DataGrid that uses checkboxes for multiple selection
*/
public class CheckBoxDataGrid extends DataGrid
{
override protected function selectItem(item:IListItemRenderer,
shiftKey:Boolean, ctrlKey:Boolean,
transition:Boolean = true):Boolean
{
// only run selection code if a checkbox was hit and always
// pretend we're using ctrl selection
if (item is CheckBox)
return super.selectItem(item, false, true, transition);
return false;
}
// turn off selection indicator
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
}
// whenever we draw the renderer, make sure we re-eval the checked state
override protected function drawItem(item:IListItemRenderer,
selected:Boolean = false,
highlighted:Boolean = false,
caret:Boolean = false,
transition:Boolean = false):void
{
if (item is CheckBox)
CheckBox(item).invalidateProperties();
super.drawItem(item, selected, highlighted, caret, transition);
}
// fake all keyboard interaction as if it had the ctrl key down
override protected function keyDownHandler(event:KeyboardEvent):void
{
// this is technically illegal, but works
event.ctrlKey = true;
event.shiftKey = false;
super.keyDownHandler(event);
}
}
}
-------------------------------------------------------
CheckBoxHeaderRenderer.as
--------------------------------------
package fx.util
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;
/**
* The Renderer.
*/
public class CheckBoxHeaderRenderer extends CheckBox
{
public function CheckBoxHeaderRenderer()
{
focusEnabled = false;
}
override public function set data(value:Object):void
{
invalidateProperties();
}
private var addedListener:Boolean = false;
//用于标识是否是部分选中
private var partiallySelected:Boolean = false;
override protected function commitProperties():void
{
super.commitProperties();
if (owner is ListBase)
{
if (!addedListener)
{
addedListener = true;
//设置事件监听
owner.addEventListener("valueCommit", owner_changeHandler, false, 0, true);
owner.addEventListener("change", owner_changeHandler, false, 0, true);
}
if (ListBase(owner).dataProvider.length ==
ListBase(owner).selectedItems.length)
{//如果选中个数等于CheckBoxDataGrid数据的个数
selected = true;//全部选中识为true
partiallySelected = false;//部分选中标识为false
}
else if (ListBase(owner).selectedItems.length == 0)
{//如果选中个数为0
selected = false;//全部选中识为false
partiallySelected = false;//部分选中标识为false
}
else
{
selected = false;//全部选中识为false
partiallySelected = true;//部分选中标识为true
}
invalidateDisplayList();
}
}
/* eat keyboard events, the underlying list will handle them */
override protected function keyDownHandler(event:KeyboardEvent):void
{
}
/* eat keyboard events, the underlying list will handle them */
override protected function keyUpHandler(event:KeyboardEvent):void
{
}
override protected function clickHandler(event:MouseEvent):void
{
if (selected)
{
//选中后设置为不选中
ListBase(owner).selectedIndex = -1;
}
else
{ //设置其他每行的checkbox为选中
var n:int = ListBase(owner).dataProvider.length;
var arr:Array = [];
for (var i:int = i; i < n; i++)
arr.push(i);
//设置选中的索引是全部行
ListBase(owner).selectedIndices = arr;
}
}
/* center the checkbox if we're in a datagrid */
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
graphics.clear();
if (listData is DataGridListData)
{
var n:int = numChildren;
for (var i:int = 0; i < n; i++)
{
var c:DisplayObject = getChildAt(i);
if (!(c is TextField))
{
c.x = (w - c.width) / 2;
c.y = 0;
c.alpha = 1;
if (partiallySelected)
{
graphics.beginFill(0x000000);
graphics.drawRect(c.x, c.y, c.width, c.height);
graphics.endFill();
c.alpha = 0.7;
}
}
}
}
}
private function owner_changeHandler(event:Event):void
{
invalidateProperties();
}
}
}
----------------------------------------------------
CheckBoxRenderer.as
---------------------------------------
package fx.util
{
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;
/**
* The Renderer.
*/
public class CheckBoxRenderer extends CheckBox
{
public function CheckBoxRenderer()
{
focusEnabled = false;
}
/**
* 初始化设置值
**/
override public function set data(value:Object):void
{
super.data = value;
invalidateProperties();
}
override protected function commitProperties():void
{
super.commitProperties();
//owner是指包含checkbox的CheckBoxDataGrid
//判断是否选中数据，如果owner是ListBase类型对象则借助ListBase的isItemSelected方法来判断是否选中某行数据
if (owner is ListBase)
selected = ListBase(owner).isItemSelected(data);
}
/* eat keyboard events, the underlying list will handle them */
override protected function keyDownHandler(event:KeyboardEvent):void
{
}
/* eat keyboard events, the underlying list will handle them */
override protected function keyUpHandler(event:KeyboardEvent):void
{
}
/* eat mouse events, the underlying list will handle them */
override protected function clickHandler(event:MouseEvent):void
{
}
/* center the checkbox if we're in a datagrid */
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
if (listData is DataGridListData)
{
var n:int = numChildren;
for (var i:int = 0; i < n; i++)
{
var c:DisplayObject = getChildAt(i);
if (!(c is TextField))
{
c.x = (w - c.width) / 2;
c.y = 0;
}
}
}
}
}
}
----------------------------------------------------------------
CheckBoxList.as
----------------------------------------
package fx.util
{
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.List;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.CheckBox;
/**
* List that uses checkboxes for multiple selection
*/
public class CheckBoxList extends List
{
// fake all mouse interaction as if it had the ctrl key down
override protected function selectItem(item:IListItemRenderer,
shiftKey:Boolean, ctrlKey:Boolean,
transition:Boolean = true):Boolean
{
return super.selectItem(item, false, true, transition);
}
// turn off selection indicator
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
}
// whenever we draw the renderer, make sure we re-eval the checked state
override protected function drawItem(item:IListItemRenderer,
selected:Boolean = false,
highlighted:Boolean = false,
caret:Boolean = false,
transition:Boolean = false):void
{
CheckBox(item).invalidateProperties();
super.drawItem(item, selected, highlighted, caret, transition);
}
// fake all keyboard interaction as if it had the ctrl key down
override protected function keyDownHandler(event:KeyboardEvent):void
{
// this is technically illegal, but works
event.ctrlKey = true;
event.shiftKey = false;
super.keyDownHandler(event);
}
}
}
------------------------------------------------------------------------
PageBar.as
-------------------------
package fx.util
{
import com.adobe.cairngorm.CairngormUtil;
import mx.collections.ArrayCollection;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.LinkBar;
import mx.events.ItemClickEvent;
//必须声明成Bindable才能在其他mxml中Bindable
[Bindable]
public class PageBar
{
/**
* 查询数据的事件名称
**/
public var eventName:String="";
/**
* 总记录数
**/
public var totalRecordSize:int=0;
/**
* 每页显示行数
**/
public var pageSize:int=10;
/**
* 当前页数
**/
public var currentPage:int=1;
/**
* 总页数
**/
public var totalPageSize:int=1;
/**
* 首页
**/
public var firstPage:int=1;
/**
* 上一页
**/
public var prePage:int=1;
/**
* 下一页
**/
public var nextPage:int=1;
/**
* 尾页
**/
public var lastPage:int=1;
/**
* 所有的数据
**/
public var orgData:ArrayCollection=new ArrayCollection();
/**
* 每页显示页码数
**/
public var pageNumShow:int=10;
/**
* 每页显示页码
**/
public var pageNumData:ArrayCollection=new ArrayCollection();
/**
* 存储查询参数
* */
public var params:Object={};
/**
* 当前页
**/
public var curPageLabel:Label=new Label();
/**
* 共多少页
**/
public var totalPageLabel:Label=new Label();
/**
* 共多少条记录
**/
public var countRecordSizeLabel:Label=new Label();
/**
* 首页
**/
public var firstNavBtn:Button=new Button();
/**
* 上一页
**/
public var preNavBtn:Button=new Button();
/**
* 分页块
**/
public var pageNav:LinkBar=new LinkBar();
/**
* 下一页
**/
public var nextNavBtn:Button=new Button();
/**
* 尾页
**/
public var lastNavBtn:Button=new Button();
public function PageBar()
{
}
/**
* 计算总页数
**/
public function countTotalPageSize():void{
//1.总记录数小于每页显示记录数时
if(this.totalRecordSize<=this.pageSize && this.totalRecordSize>=0){
this.totalPageSize=1
}
//2.总记录数大于每页显示记录数时
if(this.totalRecordSize>this.pageSize && this.pageSize>=0){
//trace("this.totalRecordSize/this.pageSize="+this.totalRecordSize/this.pageSize);
//2.1 总记录数正好是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数
this.totalPageSize=this.totalRecordSize/this.pageSize;
//trace("this.totalRecordSize%this.pageSize="+this.totalRecordSize%this.pageSize);
//2.2 总记录数不是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数+1
if(this.totalRecordSize%this.pageSize>0){
this.totalPageSize+=1;
}
}
}
/**
* 设置首页和尾页
**/
public function setFirstPageAndLastPage():void{
//1.总体分页数第一页和最后一页
this.firstPage=1;
this.lastPage=this.totalPageSize;
//2.还有一中设置是根据this.pageNumData来设置
var size:int=this.pageNumData.length;
//this.firstPage=this.pageNumData.getItemAt(0).label
//this.lastPage=this.pageNumData.getItemAt(size-1).label
}
/**
* 初始化分页，设置总记录数、每页显示记录数、当前页、计算总页数、设置首页、设置尾页
* @param totalRecordSize 总记录数
* @param pageSize 每页显示记录数
* @param currentPage 当前页页码
*
**/
public function initPageBar(totalRecordSize:int,pageSize:int,currentPage:int,pageNumShow:int,eventName:String):void{
this.pageSize=pageSize;
this.totalRecordSize=totalRecordSize;
this.pageNumShow=pageNumShow;
this.eventName=eventName;
countTotalPageSize();
this.currentPage=currentPage;
createNavBar(this.currentPage);
setNavInfo();
}
/**
* 创建各分页
**/
public function createNavBar(currentPage:int):void{
//得知总页数、当前页数、每页显示页码数后就可以设置上一页和下一页
//上一页
this.prePage=this.currentPage-1>0?this.currentPage-1:1;
//下一页
this.nextPage=this.currentPage+1<=this.totalPageSize?this.currentPage+1:this.totalPageSize;
this.pageNumData.removeAll();
if(this.totalPageSize<=this.pageNumShow){//1.总页数小于设定的页码数pageNumShow时，显示所有页码
for(var i:int=0;i<this.totalPageSize;i++){
//确保小于总页数，否则退出循环
this.pageNumData.addItem({label: 1+i ,data: 1+i});
}
}else{
if(this.totalPageSize-this.currentPage+1<=this.pageNumShow){//2.剩余页码数(this.totalPageSize-this.currentPage+1)小于设定页码数pageNumShow,补全页码
for(var i:int=this.totalPageSize-this.pageNumShow+1;i<=this.totalPageSize;i++){
//确保小于总页数，否则退出循环
this.pageNumData.addItem({label: i ,data: i});
}
}else{
for(var i:int=0;i<this.pageNumShow;i++){//3.当前页码+设定页码数小于totalPageSize时，正常滚动
//确保小于总页数，否则退出循环
if(this.currentPage+i<=this.totalPageSize){
this.pageNumData.addItem({label: this.currentPage+i ,data: this.currentPage+i});
}
}
}
}
setFirstPageAndLastPage();
}
/**
* 设置分页条上的分页统计信息
**/
public function setNavInfo():void{
//设置界面上的分页统计数据
this.curPageLabel.text=this.currentPage.toString();
this.totalPageLabel.text=this.totalPageSize.toString();
this.countRecordSizeLabel.text=this.totalRecordSize.toString();
this.pageNav.dataProvider=this.pageNumData;
}
/**
* 清空orgData中的数据，此数据用于在界面展示
**/
public function clearOrgData():void{
this.orgData.removeAll();
}
/**
* 绑定数据到orgData中
**/
public function setOrgData(data:Object):void{
this.orgData.addItem(data);
}
/**
* 清空分页条
**/
public function clearPageNumData():void{
this.pageNumData.removeAll();
}
/**
* 设定分页条
**/
public function setPageNumData(data:Object):void{
this.pageNumData.addItem(data);
}
}
}
-----------------------------------------------------------------------
PageBar.mxml
--------------------------------------
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
paddingLeft="10"
backgroundColor="white">
<fx:Style>
LinkBar {
borderStyle: none;
backgroundAlpha: 0.06;
separatorColor: #c4cccc;
rollOverColor: #009999;
selectionColor: #7fcdfe;
textSelectedColor: #6600cc;
disabledColor: #33ffff;
dropShadowEnabled: false;
}
</fx:Style>
<fx:Script>
<![CDATA[
import com.adobe.cairngorm.CairngormUtil;
import flash.events.KeyboardEvent;
import fx.model.ModelConfig;
import fx.util.SimpleAlert;
import mx.collections.ArrayCollection;
import mx.controls.AdvancedDataGrid;
import mx.controls.DataGrid;
import mx.events.ItemClickEvent;
import mx.utils.ObjectProxy;
import mx.validators.NumberValidator;
[Bindable]
public var model:ModelConfig=ModelConfig.getOne();
//这个地方才是最终要变动的：取famousExamPageBar还是finishedExamBar
[Bindable]
// public var pageBar:PageBar=model.famousExamPageBar;
public var pageBar:PageBar=null;
public var advancedDataGrid:AdvancedDataGrid=null;
// //页面初始化函数
// public function getFamouExam(page:int):void{
// pageBar.params.currentPage=page;
// //参数处理
// var params:Object=pageBar.params;
//
// //调用事件处理类
// CairngormUtil.event("FamousExamCD",params);
//
// }
//
// /**
// * 更新数据源,更新表格显示数据
// */
// public function refreshDataProvider():void{
// //绑定新查询的数据到AdvancedDataGrid
// advancedDataGrid.dataProvider=pageBar.orgData;
// }
//
//
//
//页面初始化函数
public function getDatas(page:int):void{
//重新设定当前页
pageBar.params.currentPage=page;
//参数处理
var params:Object=pageBar.params;
//调用事件处理类
CairngormUtil.event(pageBar.eventName,params);
}
/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:int):void{
//1.重新设置首页、上一页、下一页、尾页
//3.重新设置每页显示的页码条
//2.重新填充页面数据
//pageBar.createNavBar(pageString);
if(pageBar.totalPageSize == 1){
new SimpleAlert().show("当前页已包含所有数据！");
return;
}
if(pageBar.currentPage == pageBar.firstPage && pageString == 1){
new SimpleAlert().show("已到达首页！");
return;
}
if(pageBar.currentPage == pageBar.lastPage && pageString == pageBar.lastPage){
new SimpleAlert().show("已到达尾页！");
return;
}
getDatas(pageString);
}
/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
//重发数据请求
getDatas(event.item.data);
}
]]>
</fx:Script>
<mx:Label text="第" width="100%"/>
<mx:Label id="curPageLabel" text="{pageBar.currentPage}" width="100%"/>
<mx:Label text="页/共" width="100%"/>
<mx:Label id="totalPageLabel" text="{pageBar.totalPageSize}" width="100%"/>
<mx:Label text="页 共" width="100%"/>
<mx:Label id="countRecordSizeLabel" text="{pageBar.totalRecordSize}" width="100%"/>
<mx:Label text="条记录" width="100%"/>
<mx:Button id="firstNavBtn" label="首页" click="navigateButtonClick(pageBar.firstPage)"/>
<mx:Button id="preNavBtn" label="上一页" click="navigateButtonClick(pageBar.prePage)"/>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{pageBar.pageNumData}"/>
<!-- <mx:ToggleButtonBar id="pageNav2" itemClick="navigatePage(event)" dataProvider="{pageBar.pageNumData}" dropShadowVisible="false"/> -->
<mx:Button id="nextNavBtn" label="下一页" click="navigateButtonClick(pageBar.nextPage)"/>
<mx:Button id="lastNavBtn" label="尾页" click="navigateButtonClick(pageBar.lastPage)"/>
</mx:HBox>
-----------------------------------------------------------------------
<paging:CheckBoxDataGrid id="dg" dataProvider="{model.finishedExamPageBar.orgData.toArray()}" horizontalScrollPolicy="on"
allowMultipleSelection="true" change="foo.text = dg.selectedIndices.toString()" >
<paging:columns>
<mx:DataGridColumn dataField="paperId" headerText=" " width="20"
sortable="false" itemRenderer="fx.util.CheckBoxRenderer" headerRenderer="fx.util.CheckBoxHeaderRenderer" >
</mx:DataGridColumn>
<mx:DataGridColumn dataField="paperName" headerText="First Name" />
<mx:DataGridColumn dataField="source" headerText="Last Name" />
</paging:columns>
</paging:CheckBoxDataGrid>
<mx:Label id="foo" />