顯示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;
public function viewThisExam(event:MouseEvent):void{
Alert.show("成績ID="+data.id+" 試卷ID="+data.paperId);
}
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;
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;
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();
}
}
override protected function keyDownHandler(event:KeyboardEvent):void
{
}
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;
}
}
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;
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);
}
override protected function keyDownHandler(event:KeyboardEvent):void
{
}
override protected function keyUpHandler(event:KeyboardEvent):void
{
}
override protected function clickHandler(event:MouseEvent):void
{
}
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;
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
}
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;
}
public function clearOrgData():void{
this.orgData.removeAll();
}
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);
}
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" />