引言: 以下有部分内容来自网上, 这个实例中是将多种不同的应用结合在一起, 实现一个比较完整的操作
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>
演示效果：
分享到：
相关推荐
flex中的datagrid是一个重量级的组建，也是数据绑定中的主要组件之一。
这个分页只与后台交互一次，然后将获得的集合在前台进行分页显示。
EasyUI:基本布局&tree菜单数据的绑定&DataGrid数据查询&数据绑定&分页
DataGrid绑定数据分页出错DataGrid绑定数据分页出错
实现了数据的双向绑定，更改DataGrid的数据会更新后台数据，更改后台数据会在DataGrid上实时显示。
flex中dataGrid导出数据到excel中，不存在乱码问题
这是一个在VB中使用 数据库绑定控件DataGrid的实例，演示了如何将从数据库中读取出的数据显示到DataGrid控件中。本例子中包括了很多ADO 操作数据库方面的基本操作，是新手学习VB环境下的ado操作的好范例，比如添加、...
Flex DataGrid从XML文件中加载数据
Flex dataGrid 全选、反选 checkBox 不是很完善，但很有借鉴意义
flex 通过读取xml文件 实现动态DataGrid数据列表
flex datagrid pagination, flex分页组件
这是我自己开发的一个dataGrid分页的控件，上传的资源是一个打成包的flex项目，这个控件在查询数据时是与后台进行实时交互的，表格的表头样式是重写皮肤类进行定义的，而隔行变色是通过css来实现的。其中最重要的...
用DataGrid控件绑定数据，并进行排列、分页
NULL 博文链接：https://lqw.iteye.com/blog/537409
通过这个简单的DataGrid数据绑定实例，可有效帮助新手学会C#最基本的数据库操作，这些操作主要有使用DBConnection连接数据源或数据库，使用DataSet设定数据对象，使用DataGrid绑定数据并显示，这些都是基础的知识，...
原理就是ArrayCollection的filterFunction的使用。是根据老外一个帖子改的，其他下载地址在 ：http://www.zuidaima.com/share/1714555305004032.htm
将flex中datagrid组件中数据导出到excel表格中。思路很简单，利用as将datagrid中的数据解析出来，传到后台java服务端处理，即可保存为excel文件。
这是我自己开发的一个dataGrid分页的控件，上传的资源是一个打成包的flex项目，这个控件在查询数据时是与后台进行实时交互的，表格的表头样式是重写皮肤类进行定义的，而隔行变色是通过css来实现的。其中最重要的...
WPF MVVM DataGrid分页案例 运用数据绑定 Command 可作为MVVM学习使用
flex中的datagrid的分页定位以及高亮显示