flex4 分页通用组件

最新推荐文章于 2024-10-16 20:28:47 发布

wanglu271991027

最新推荐文章于 2024-10-16 20:28:47 发布

阅读量154

点赞数

分类专栏： flex 文章标签：大数据

本文链接：https://blog.csdn.net/wanglu271991027/article/details/84351688

版权

flex 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.新建一个 vbox
代码如下

<?xml version="1.0" encoding="UTF-8"?>
<mx:VBox  xmlns:fx="http://ns.adobe.com/mxml/2009"
	 xmlns:s="library://ns.adobe.com/flex/spark"   
	 xmlns:mx="library://ns.adobe.com/flex/mx"
	   width="100%" height="100%">
	<fx:Script>
		<![CDATA[
 			import mx.controls.Alert;
			import mx.rpc.events.AbstractEvent;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.collections.ArrayCollection;	 		
			import mx.effects.easing.*;	

			[Bindable]
			public var dataSource:ArrayCollection=new ArrayCollection();//存放数据源
			[Bindable]
			public var dataColumn:Array;//存放列
			[Bindable]
			public var totalPage:int;//总页数
			[Bindable]
		    public var totalRecords:int;//一共有多少条
		    [Bindable]
			public var currentPage:int=1;/*当前页*/
			[Bindable]
			public var rowsPerPage:int=1;//一页显示多少条

			protected function pgup_clickHandler(event:MouseEvent):void
			{			
				currentPage--;		
				if(currentPage<=0)
				{
					currentPage=1;
				}
				this.dispatchEvent(new Event("pageChangeEvent"));
			}

			protected function pgdn_clickHandler(event:MouseEvent):void
			{
				currentPage++;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}

			protected function firstPage_clickHandler(event:MouseEvent):void
			{
				currentPage=1;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}

			protected function lastPage_clickHandler(event:MouseEvent):void
			{
				currentPage=totalPage;
				this.dispatchEvent(new Event("pageChangeEvent"));
			}
			protected function go_clickHandler(event:MouseEvent):void
			{
				if(pageTxt.value>0&&pageTxt.value<=totalPage){
					currentPage=pageTxt.value;
					this.dispatchEvent(new Event("pageChangeEvent"));
				}else{
				   Alert.show("请输入合法的数字");
				}
			}
		]]>
	</fx:Script>
	<fx:Metadata>
		[Event(name="pageChangeEvent",type="flash.events.Event")]		 
	</fx:Metadata>

		<mx:DataGrid width="100%" height="100%" id="dataGrid"      dataProvider="{dataSource}" columns="{dataColumn}">	
	</mx:DataGrid>


	<mx:HBox width="100%" height="5%" paddingRight="10"   id="hBox"  verticalAlign="middle"  horizontalAlign="right"> 
		<mx:Button label="首页" id="firstPage" enabled="{currentPage==1?false:true}" click="firstPage_clickHandler(event)" />

	    <mx:Button label="上一页" id="pgup" enabled="{currentPage>1?true:false}" click="pgup_clickHandler(event)"/>
		<mx:Button label="下一页"  id="pgdn" enabled="{currentPage>=totalPage?false:true}" click="pgdn_clickHandler(event)"/>
		<mx:Button label="尾页" id="lastPage" enabled="{currentPage==totalPage?false:true}" click="lastPage_clickHandler(event)" />
		<mx:Label     id="pageDetail" text="共{totalRecords}条记录    第{currentPage}页/共{totalPage}页" x="591"/>
		<s:NumericStepper   id="pageTxt" maximum="{totalPage}"  value="1" stepSize="1."   x="787" width="52"/>
		<mx:Button label="GO"    id="go" click="go_clickHandler(event)"/>
</mx:HBox>
<fx:Declarations>
<!--
<s:Sequence id="sequence" target="{dataGrid}">

	    <mx:Move xBy="{width}" duration="2000" easingFunction="Bounce.easeOut"/>
            <mx:Pause duration="100"/>
        <mx:Move  xBy="{-width}" duration="2000" easingFunction="Bounce.easeIn"/>


</s:Sequence>-->
<!--实现转-->
<!-- <s:Rotate3D id="sequence" 

          angleYFrom="0" angleYTo="360"
          duration="100" autoCenterTransform="true"
          />-->

</fx:Declarations>
</mx:VBox>

里有分页有显示记录条数跟总页数
2.在引用界面开 xmlns:util="com.relonger.cclj.util.*"
如图：
[img]http://dl.iteye.com/upload/attachment/0075/9883/62df0650-69b1-367f-86c4-a4728a5a4a49.jpg[/img]
在要显示的地方加上如下代码

	<util:CommDataGrid id="codg"  pageChangeEvent="codg_pageChangeEventHandler(event)" dataSource="{dp}" width="100%" height="100%">
				<util:dataColumn>
<!-- 这个是编号自动增长的-->
					<!--<mx:DataGridColumn headerText="label" dataField="label">
					<mx:itemRenderer>
					<fx:Component >
					<mx:Label text="{this.outerDocument.genrowno(data)}" />
					</fx:Component>
					</mx:itemRenderer>			
					</mx:DataGridColumn>-->
					<mx:DataGridColumn headerText="label" dataField="label"/>
					<mx:DataGridColumn headerText="d1" dataField="d1"/>
					<mx:DataGridColumn headerText="d2" dataField="d2"/>
					<mx:DataGridColumn headerText="d3" dataField="d3"/>
					<mx:DataGridColumn headerText="d4" dataField="d4"/>
					<mx:DataGridColumn headerText="d5" dataField="d5"/>
				</util:dataColumn>
			</util:CommDataGrid>

（1）dp 为数组源
（2）codg_pageChangeEventHandler 为组件里面挷定的函数里面所有的操体做都是靠他来完成的在codg_pageChangeEventHandler 方法里同向后吧传值需要给后台传要显示当前是第几页每页显示的记录条数在反回的方法里面要给三个数付值
如
（3）编号方法如下

public function genrowno(ob:Object):String
			{
				return String((codg.dataGrid.dataProvider as ArrayCollection).getItemIndex(ob)+1);
			}

dp = new ArrayCollection([{"d1":"","d2":"","d3":"","d4":"","d5":"66.38","label":"平江区"},{"d1":"","d2":"","d3":"25.46","d4":"","d5":"24.46","label":"沧浪区"},{"d1":"57.82","d2":"21.24","d3":"","d4":"","d5":"","label":"高新区"},{"d1":"","d2":"51.72","d3":"","d4":"","d5":"","label":"吴中区"},{"d1":"","d2":"","d3":"69.16","d4":"","d5":"","label":"金阊区"},{"d1":"","d2":"39.48","d3":"","d4":"","d5":"","label":"相城区"}]);
codg.totalPage=20; // 一共有多少页
codg.totalRecords=100//一共有多少条记录

整体页面分格如下

[img]http://dl.iteye.com/upload/attachment/0075/9885/1968dd8a-c0be-3a7d-947d-525e6bac6dfd.jpg[/img]
请大家多多指点