显示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" />
