引言: 以下有部分内容来自网上, 这个实例中是将多种不同的应用结合在一起, 实现一个比较完整的操作
Flex 页面:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp()"><!-- 发送HTTPService请求-->
<!--单击Datagrid中的一条记录时跳转的状态-->
<mx:states>
<mx:State name="itemInfo">
<mx:RemoveChild target="{dg}"/>
<mx:RemoveChild target="{fPage}"/>
<mx:RemoveChild target="{txt}"/>
<mx:RemoveChild target="{nPage}"/>
<mx:RemoveChild target="{lPage}"/>
<mx:RemoveChild target="{pPage}"/>
<mx:AddChild relativeTo="{panel}" position="lastChild">
<mx:Label x="49" y="48" text="Username:" color="#682F91"/>
</mx:AddChild>
<mx:AddChild relativeTo="{panel}" position="lastChild">
<mx:Label x="177" y="52" width="146" id="itemName" color="#6E4789"/>
</mx:AddChild>
<mx:AddChild relativeTo="{panel}" position="lastChild">
<mx:Label x="49" y="102" text="Password:" color="#35184A"/>
</mx:AddChild>
<mx:AddChild relativeTo="{panel}" position="lastChild">
<mx:Label x="177" y="102" width="146" id="itemPass" color="#4B1F6A"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script >
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
[Bindable]
//自定义分页数据
private var users:XML; //保存分页的源数据[ XML 格式 ]
public var userData:Array=new Array(); //保存显示时绑定的数据[ XML 转换为 Array]
public var pageRecordes:uint =4;
public var totalPages:uint = 0;
public var totalRows:uint = 0;
public var currentPage:uint = 1;
public var pageStartRow:uint = 1;
public var pageEndRow:uint = 0;
private function resultUsers(event:ResultEvent):void{//处理结果
users = XML(event.result);
for(var prop:String in users..user){
var node:XML = users..user[prop];
var obj:Object = new Object();
obj.name = node.name;
obj.password = node.password;
userData.push(obj);
obj = null;
}
}
public function initApp():void{
srv.send();
txt.text = "Page " + currentPage;
totalRows = userData.length;
if(userData.length > pageRecordes){
dg.dataProvider = userData.slice(0,pageRecordes);
pPage.enabled = false;
}
if((totalRows % pageRecordes) == 0){
totalPages = Math.floor(totalRows / pageRecordes);
}else{
totalPages = Math.floor(totalRows / pageRecordes + 1);
}
if(totalRows <= pageRecordes){
this.pageStartRow = 1;
this.pageEndRow = totalRows;
} else {
this.pageStartRow = 1;
this.pageEndRow = pageRecordes;
}
if(totalPages == 1){
pPage.enabled = false;
nPage.enabled = false;
}
}
public function showPreviousPage():void{
currentPage = currentPage - 1;
txt.text = "Page " + currentPage;
if(currentPage == 1){
pPage.enabled = false;
nPage.enabled = true;
}else{
pPage.enabled = true;
nPage.enabled = true;
}
if (currentPage == totalPages) {
pageStartRow = (currentPage - 1) * pageRecordes + 1;
pageEndRow = totalRows;
} else {
pageStartRow = (currentPage - 1) * pageRecordes + 1;
pageEndRow = currentPage * pageRecordes;
}
dg.dataProvider = userData.slice(pageStartRow - 1,pageEndRow);
}
public function showNextPage():void{
currentPage = currentPage + 1;
txt.text = "Page " + currentPage;
if(currentPage == totalPages){
nPage.enabled = false;
pPage.enabled = true;
}else{
nPage.enabled = true;
pPage.enabled = true;
}
if (currentPage == totalPages) {
pageStartRow = (currentPage - 1) * pageRecordes + 1;
pageEndRow = totalRows;
} else {
pageStartRow = (currentPage - 1) * pageRecordes + 1;
pageEndRow = currentPage * pageRecordes;
}
dg.dataProvider = userData.slice((currentPage - 1) * pageRecordes,pageEndRow);
}
public function showFirstPage():void{
dg.dataProvider = userData.slice(0,pageRecordes);
pPage.enabled = false;
nPage.enabled = true;
txt.text = "Page " + 1;
currentPage = 1;
}
public function showLastPage():void{
dg.dataProvider = userData.slice((totalPages - 1) * pageRecordes,totalRows);
pPage.enabled = true;
nPage.enabled = false;
txt.text = "Page " + totalPages;
currentPage = totalPages;
}
/* 单击Datagrid时显示被选中项的信息*/
public function http://localhost:8080/FlexXmlTest/XmlFile/users.xml">http://localhost:8080/FlexXmlTest/XmlFile/users.xml" useProxy="false"
id="srv" resultFormat="xml" result="resultUsers(event)"><!--处理结果函数-->
</mx:HTTPService>
<mx:Panel x="346" y="108" width="500" height="339" layout="absolute" id="panel" title="用户信息" fontSize="14" fontWeight="bold" fontFamily="Verdana" color="#BB8BDD" borderStyle="solid" borderThickness="3" borderColor="#0E0505" cornerRadius="20" themeColor="#A3C2D8" alpha="0.85" backgroundColor="#FFFFFF" backgroundAlpha="0.84">
<mx:DataGrid x="32" y="10" width="374" height="193" enabled="true" id="dg" dataProvider="{userData}"
change="onChange()"
fontSize="13" fontWeight="bold" textAlign="center" color="#526BBE" borderColor="#C0C8CC" themeColor="#A9B1B3" alpha="0.86" alternatingItemColors="[#E9E9E9, #EFF8F9]" borderStyle="inset">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" width="200" />
<mx:DataGridColumn headerText="Password" dataField="password" width="200"/>
</mx:columns>
</mx:DataGrid>
<mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="lPage" label="lastPage" itemClick="showLastPage()" x="357" y="238">
<mx:dataProvider>
<mx:Array>
<mx:String>lastPage</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:LinkBar>
<mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="nPage" label="nextPage" itemClick="showNextPage()" x="244" y="238">
<mx:dataProvider>
<mx:Array>
<mx:String>nextPage</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:LinkBar>
<mx:Text id="txt" width="52" x="184" y="246"/>
<mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="pPage" label="prevPage" itemClick="showPreviousPage()" x="96" y="242">
<mx:dataProvider>
<mx:Array>
<mx:String>prePage</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:LinkBar>
<mx:LinkBar borderStyle="solid" color="#000000" backgroundColor="#CCFFFF" id="fPage" label="firstPage" itemClick="showFirstPage()" x="10" y="245">
<mx:dataProvider>
<mx:Array>
<mx:String>firstPage</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:LinkBar>
</mx:Panel>
</mx:Application>XML 文件:
<?xml version="1.0" encoding="utf-8" ?>
<users>
<user>
<name>meteorWJ</name>
<password>123</password>
</user>
<user>
<name>eleven</name>
<password>123</password>
</user>
<user>
<name>crystal</name>
<password>123</password>
</user>
<user>
<name>syani</name>
<password>123</password>
</user>
<user>
<name>meteor</name>
<password>123</password>
</user>
<user>
<name>Kate</name>
<password>123</password>
</user>
<user>
<name>John</name>
<password>123</password>
</user>
<user>
<name>Vanessa</name>
<password>123</password>
</user>
<user>
<name>Davi</name>
<password>123</password>
</user>
<user>
<name>Jim</name>
<password>123</password>
</user>
<user>
<name>Jake</name>
<password>123</password>
</user>
</users>