`
hereson
  • 浏览: 1454406 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Flex 分页DataGrid

    博客分类:
  • flex
阅读更多
Local:Kelvin_LinkButton是我重写的一个LinkButton,换成mx: LinkButton即可.

 

kelvin_DataGrid.mxml代码:

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:local="*">

    <mx:Script>

       <![CDATA[

           /*分页DataGrid

            by Kelvin 2008-02-24

            MSN:xiaobolove@hotmail.com

            Email:xiaobolove334421@163.com

            

            因为是一次取出全部数据,所以适合数据量不会太大的情况。

            加了一个pageSize,用来控制每页显示的行数,可以在调用这个组件的时候为pageSize属性赋值,

            默认为每页显示10行数据,不需要为DataGrid指定高度。

            参考 古刹飞鹰@E鹰创作室 的文章

            */

           import mx.collections.ArrayCollection;

           

           [Bindable]public var pageSize:int=10;//每页显示行数

           [Bindable]private var totalPage:int=0;//总页数

           [Bindable]private var currentPage:int=0;//当前页

           

           [Bindable]

           public var acAllData:ArrayCollection;//所有数据

           [Bindable]

           private var acPageData:ArrayCollection=new ArrayCollection();//当前页数据

           [Bindable]

           public var arrColumns:Array;//DataGrid列,在调用时需要为这个数组设置数据

           

           //初始化

           public function init(value:ArrayCollection):void

           {

              acAllData=value;

              if(acAllData.length!=0 && acAllData!=null)

              {

                  totalPage=Math.ceil(acAllData.length/pageSize);

                  loadData(0);

              }else{

                  currentPage=0;

                  totalPage=0;

              }

           }

           

           //加载数据

           private function loadData(pageNum:int):void

           {

              if(pageNum>=0 && pageNum<totalPage)

              {

                  acPageData.removeAll();

                  currentPage=pageNum;//重新为当前页的变量赋值

                  var startIndex:int=pageNum*pageSize;//计算起始索引

                  for(var i:int=0;i<pageSize && startIndex<acAllData.length;i++)

                  {

                     acPageData.addItem(acAllData[startIndex]);

                     startIndex++;

                  }

              }

           }

       ]]>

    </mx:Script>

    <mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center" backgroundColor="white">

       <mx:DataGrid id="customgrid" width="100%" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/>

       <mx:HBox cornerRadius="12" borderStyle="solid" horizontalAlign="center" verticalAlign="middle">

           <mx:Text text="{'  第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+'  共'+(acAllData!=null?acAllData.length:0)+'条记录'}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnFirst" label="首页" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnLast" label="尾页" click="loadData(totalPage-1)" enabled="{lbtnNext.enabled}" fontSize="12"/>

            <mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}"/>

            <local:Kelvin_LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>

       </mx:HBox>

    </mx:VBox>

</mx:Canvas>

 

调用Test.mxml:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"

     creationComplete="creationComplete()">

     <mx:Script>

        <![CDATA[

           import mx.collections.ArrayCollection;

           

           [Bindable]

           private var ac:ArrayCollection;

           

           private function creationComplete():void

           {

               loadAcData();

           }

           

           //如果查询出来的数据为xml格式,调用这个方法

           private function loadXmlData(xml:XML):void

           {

               ac=new ArrayCollection();

              for each(item in xml.Table)//将Table换成XML中的根元素名称

              {

                  ac.addItem(item);

              } 

              dg.init(ac);

           }

           

           //查询出来的结果为数组,直接传递给init即可

           private function loadAcData():void

           {

               ac=new ArrayCollection();

               //测试数据

               for(var i:int=0;i<35;i++)

               {

                  var obj:Object=new Object();

                  obj.photo_id=i.toString();

                  obj.photo_name="photo"+i;

                  ac.addItem(obj);  

               }

               dg.init(ac); 

           }

        ]]>

     </mx:Script>

     <!--设置pageSize为8,表示每页显示8条记录,不设置默认显示10条记录-->

    <local:kelvin_DataGrid id="dg" width="100%" height="100%" pageSize="8">

       <local:arrColumns><!--为这个标签设置DataGridColumn,指示在DataGrid上显示的列-->

           <mx:DataGridColumn headerText="id" dataField="photo_id"/>

           <mx:DataGridColumn headerText="name" dataField="photo_name"/>

       </local:arrColumns>

    </local:kelvin_DataGrid>

</mx:Application>

 

分享到:
评论
1 楼 zxd7900663 2010-01-29  
不错,有个地方小改一下就可以跑了
for each(var item:Object in xml.Table)//将Table换成XML中的根元素名称
楼主写的提示item未定义,呵呵

相关推荐

    flex datagrid 前台 分页

    实现Flex DataGrid的前台分页,首先需要确保数据源能够一次性加载所有数据。这可能意味着你需要有足够的内存来处理这些数据,否则可能会导致性能问题。在获取数据后,你可以使用DataGrid的`dataProvider`属性来绑定...

    具有分页功能的flex的DataGrid

    在Flex开发中,DataGrid...解压并研究这些文件,可以帮助我们深入理解如何在Flex中实现分页DataGrid和数据导出到Excel的完整流程。同时,这也是一个很好的学习和参考案例,对于提升Flex应用的用户体验有着积极的意义。

    Flex中DataGrid分页源码

    本文将详细解析使用AS3.0在Flex中实现DataGrid分页的功能,帮助你深入理解这一技术。 首先,Flex是Adobe开发的一个开放源代码框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括DataGrid,这是一...

    flex 的datagrid分页

    "flex的datagrid分页"这个主题,主要涉及如何在DataGrid中实现数据的分页显示,以便用户能够高效地浏览大量数据,而不会因为一次性加载所有数据导致性能下降。下面将详细介绍DataGrid分页的相关知识点: 1. **数据...

    flex 三状态多选 自动分页DataGrid

    综上所述,"flex 三状态多选 自动分页DataGrid"是一个包含多个技术点的专题,涵盖了数据展示、用户交互、性能优化等多个方面。开发者需要对Flex的组件体系、数据模型、事件处理以及UI设计有深入理解,才能有效地实现...

    Flex DataGrid 分页

    Flex DataGrid 分页是Adobe Flex开发中一个关键的用户界面组件功能,用于处理大量数据时提高性能和用户体验。在Web应用程序中,一次性加载所有数据可能导致页面加载缓慢,消耗大量内存,而分页则能有效地解决这个...

    Flex4 DataGrid控件行编辑项目

    在Flex4.6开发环境中,DataGrid控件是用于展示数据集合的重要组件,它提供了丰富的功能,如排序、分页和自定义列显示。在这个项目中,我们关注的是如何实现DataGrid的行编辑功能,特别是在行中嵌套ComboBox控件以...

    使用Flex开发DataGrid分页控件应用支持客户端及服务端

    本教程将详细介绍如何在Flex中开发一个支持客户端和服务器端分页的DataGrid控件。 1. 客户端分页: 在客户端分页中,应用程序会一次性从服务器获取所有数据,然后在客户端进行分页处理。这种方式的优点是用户交互...

    flex基于datagrid控件的增删改查及分页实现

    综上所述,了解和掌握Flex DataGrid的使用,包括数据绑定、CRUD操作和分页,对于开发富互联网应用来说是非常重要的。通过实践和参考相关教程,如提供的博文链接,开发者可以更好地理解和实现这些功能。

    Flex分页技术

    综上所述,Flex开发Flex dataGrid分页技术涵盖了数据管理、用户交互、性能优化等多个方面,这些知识点对于构建功能丰富的Flex应用至关重要。通过理解并运用这些技术,开发者可以创建出高效、易于使用的数据展示界面...

    flex datagrid 分页控件源码

    在描述中提到的“flex datagrid pagination”是指DataGrid控件的一个重要特性——分页功能。在处理大数据集时,分页是必不可少的,因为它能提高用户体验,避免一次性加载所有数据导致的性能问题。下面将详细讲解Flex...

    flex datagrid分页 动态绑定数据源

    本篇文章将深入探讨“flex datagrid分页动态绑定数据源”的相关知识点。 首先,让我们理解Flex Datagrid的基本概念。Flex Datagrid是一个灵活的数据呈现控件,能够处理各种数据源,包括ArrayCollection、...

    flex下拉dataGrid

    在Flex开发中,"flex下拉dataGrid"是一种常见的用户界面组件组合,它结合了下拉菜单(Dropdown)和数据网格(DataGrid)的功能,用于提供丰富的数据选择体验。这样的设计通常用于当用户需要从一个较大的数据集合中...

    flex 把datagrid的内容导出到Excel

    本文将深入探讨如何使用Flex来实现一个功能,即把Datagrid组件中的内容导出到Excel文件。 Datagrid是Flex中的一个核心组件,用于展示表格数据。它提供了丰富的功能,如排序、分页和自定义列显示。然而,有时用户...

    flex 分页

    "Flex分页"指的是使用Adobe Flex框架实现数据的分页显示。Flex是一个开源的、基于ActionScript的开发框架,用于构建富互联网应用(RIA)。在这个场景下,我们将深入探讨Flex中的分页实现以及相关知识点。 首先,...

    Flex创建可编辑以及分页的DataGrid

    本篇文章将深入探讨如何在Flex中创建一个既可编辑又具有分页功能的DataGrid。 首先,我们需要导入必要的库和类。在Flex项目中,`mx.controls.DataGrid` 是核心的DataGrid类,而`mx.controls.PagingControl` 和 `mx....

    Flex FooterSpark DataGrid 表格制作

    3. **高效开发**: 描述中提到的“高效表格开发技术实例”,意味着教程可能会涉及如何优化DataGrid的性能,如通过虚拟化技术减少内存消耗,使用数据代理减少数据绑定的复杂性,以及如何利用分页和过滤功能来提升用户...

    flex分页代码

    "Flex分页代码"指的是使用Adobe Flex这一编程框架实现的分页功能。Flex是一款基于ActionScript 3.0的开源框架,它允许开发者构建富互联网应用(RIA)。在这里,我们主要探讨如何在Flex中实现分页功能。 Flex提供了...

    Flex-DataGrid源码及资料

    Flex DataGrid是一款在Adobe Flex开发环境中广泛使用的组件,主要用于展示和操作大量结构化的数据。它是一种灵活的表格视图,可以轻松地实现数据的排序、筛选、分页等功能。在这个"Flex-DataGrid源码及资料"的压缩包...

    将Flex DataGrid数据导出到Excel中

    在开发基于Adobe Flex的应用程序时,我们经常遇到需要将数据展示在用户友好的方式中,例如使用DataGrid组件。然而,有时用户希望将这些数据显示在更传统的格式中,如Microsoft Excel电子表格。本教程将详细介绍如何...

Global site tag (gtag.js) - Google Analytics