每天学一点Flex(1):DataGrid组件分页
有一段时间没有接触flex ,有点不怎会用flex。还好最近弄了一下分页的东西,对xml进行分页还是挺管用。借用之前封装好的类居然解决很久之前的问题。对DataGrid 的组件分页,可以通过对XML进行一些处理,看起来真的分页了。实际上只是一种错觉。
首先先准备一个数据源XML。大概以一个员工作姓名 年龄和性别 为数据源。这个XML 包含很多条员工的信息。下面只是显示2条,可以自己进行充。
<?xml version="1.0" encoding="UTF-8"?>
<member>
<worker>
<name>jim</name>
<age>12</age>
<sex>man</sex>
</worker>
<worker>
<name>lili</name>
<age> 23</age>
<sex> girl</sex>
</worker>
</member>
//用于计算的分页类。包含分页的方式,当前页,显示分页数的。
package com.web
{
//分页类
public class Page
{
private var max:int;
private var pagenum:int;
private var currentPages:int;
public function Page()
{
}
//设置分页项数
public function set MaxRow(max:int):void
{
this.max=max;
}
//获取分页项数
public function get MaxRow():int
{
return max;
}
public function set currentPage(value:int):void
{
this.currentPages=value;
}
public function get currentPage():int
{
return currentPages;
}
//获取总的分页数,利用求余的方式判断是不是整页
public function getPageNumber(total:int):int
{
if (total%MaxRow==0)
{
pagenum=total/MaxRow;
} else
{
pagenum=int(total/MaxRow)+1;
}
return pagenum;
}
public function get TotalPage():int
{
return pagenum;
}
//显示页码
public function getPage():String
{
var str:String=(currentPage+1)+"/"+TotalPage;
return str;
}
}
}
下面为MXML。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
相关文档:
注意:本机必须连接互联网
效果图:
源码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="init()">
<mx:Panel width="620" height="455" layout="absolute" title="天气预报" fontSize="12">
......
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()"
backgroundColor="#FFFFFF">
<mx:Canvas id="paper"
......
-----------------ex4_01_solution------------------Creating an event and dispatching the event object
<s:Application ...
creationComplete="employeeService.send()">
会触发:
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
& ......
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/04/adding-animations-and-effects-to-flex-tool-tips/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertic ......