麻球开发者平台,麻球开发者大赛

只看楼主 楼主

艾睿会员有特权,登陆后广告自动屏障。
现在就花5秒钟免费注册!更有好礼相送!

Adobe Flex迷你教程 -- DataGrid,搜索数据,搜索结果多页显示

有朋友问到这个问题,这个问题主要涉及到dataProvider的操作,比较有针对性,所以写做教程。

这篇教程的核心是,Grid显示数据并不是操作Grid,而是操作它的dataProvider, Grid只是显示数据的载体

Demo操作:

1. 开始显示从A到Z的国家列表。可以前后翻页,每页显示10条
2. 从search框中输入搜索信息,grid将显示含有搜索字母的所有城市.
3. 同样可以对search结果进行翻页。


主要方法:

调用这个方法根据currentPage和searchedData设置Grid显示当前页

private function setCurrentPage():void{
         currentPageData = new XMLListCollection();  //清空数据
         var startIndex:int = currentPage * pageSize - pageSize;  //开始位置
         var endIndex:int = currentPage * pageSize;//结束位置
         if(endIndex >= searchedData.length){  //如果结束位置大于search data的长度,结束位置为search data的长度
             endIndex = searchedData.length;
             this.lastPage = this.currentPage;
         }
         for(var i:int = startIndex; i< endIndex; i++){   //设置当前页数据
               currentPageData.addItem(searchedData[i]);
         }
     }


调用此方法查询从 allData中查询数据,并显示第一页

     private function doSearch():void{
             this.searchedData = new XMLListCollection()  //清空数据
           for each(var item:XML in allData){          //从allData中搜索数据,将搜索到的数据添加到searchData
               var value:String =item.@name.toString()
               if(value.indexOf(searchValue.text) != -1){
                   this.searchedData.addItem(item);
               }
           }
           this.currentPage = 1;  //显示第一页
           this.setCurrentPage();
     }





原文:  http://www.flextheworld.com/?p=49
[本帖最后由 kevin.luo.sl 于 2009-01-02 21:07:59 编辑]

(您是游客)您没有权限查看附件

kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 沙发!

谢谢

楼主好热心啊,继续加油啊,给我们这些菜鸟多出一些学习的教程

评分

举报 使用道具 TOP

只看该用户 板凳

很惊讶flex里datagrid的pagination竟然要自己来写,希望能在下个版本中内建地支持……
已经有人加了需求了,请看
https://bugs.adobe.com/jira/browse/FLEXDMV-1860

不过在这之前,下面这个分页例子还有点用。
http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html
[本帖最后由 Ender 于 2008-12-21 11:30:04 编辑]

评分

举报 使用道具 TOP

只看该用户 地板

很惊讶flex里datagrid的pagination竟然要自己来写,希望能在下个版本中内建地支持……
已经有人加了需求了,请看
https://bugs.adobe.com/jira/browse/FLEXDMV-1860

不过在这之前,下面这个分页例子还有点用。
http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html
-- by Ender (2008-12-21 11:24:25)


因为翻页不是Grid的功能,所以我估计Adobe是不会加的

上面的例子和我的例子都是在已知所有数据的情况下让grid每页显示一定的数据量。这是想让大家明白Grid的“翻页”实际是对DataProvider的操作,Grid只是载体。

Grid在显示大数据量的时候,翻页应该起到分段载入数据的作用,从而减轻客户端与服务器之间数据传输的压力。从这两个例子我们可以看到, Grid没做任何事,我们都是在操作传入Grid的DataProvider。所以如何根据实际情况构建当前需要的dataprover是Grid “翻页”的关键。

比如一个场景

当前有10万条数据, Grid每页显示100条,用户可以搜索。

实现这样的功能我们就不可能把10万条数据都载入下来了保存到客户端,而从中找出每页100条来显示,这样做不仅没有起到翻页的效果,反而占用了客户端大量的内存以及服务器与客户端之间大量的数据传输,这是我们不愿看到。

所以服务器在这里才是翻页的实现者,它根据参数构建合适的dataProvder,传给客户端,客户端的Grid只是显示这个数据,并将搜索或者翻页信息传给服务器。 如果再加上客户端对已获得的数据的适当换存。那么flex对这10万条数据的显示也就差不多了。
[本帖最后由 kevin.luo.sl 于 2008-12-21 13:14:32 编辑]
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #4

楼主很勤奋,辛苦了

评分

举报 使用道具 TOP

只看该用户 #5

请问版主,哪个属性可以让Grid可以多行选择
不是,CheckBox那个例子,
而是点哪行,哪行就变蓝色,按住Ctrl键再点另一行,就多了一行变蓝色,按住Shift键可以多选一片,那种效果
然后在程序如何取得都有哪些行被选蓝了?
[本帖最后由 TonyLian 于 2008-12-21 21:16:34 编辑]

评分

举报 使用道具 TOP

只看该用户 #6

多看看Help, allowMultipleSelection, selectItems
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #7

好东西。楼主发这种例子,给大家一个提示

评分

举报 使用道具 TOP

只看该用户 #8

多看看Help, allowMultipleSelection, selectItems
-- by kevin.luo.sl (2008-12-21 22:21:06)

虽然有万能的版主,但还要自己努力去探索!!

评分

举报 使用道具 TOP

只看该用户 #9

bu cuo ..
alizem的签名
茫然

评分

举报 使用道具 TOP

只看该用户 #10

那么如何实现这种多选行的“反选”呢?
用dataProvider - selectedItems 吗?有更简单的办法吧?

评分

举报 使用道具 TOP

只看该用户 #11

顶起来

评分

举报 使用道具 TOP

只看该用户 #12

恩,用  selelctedItems, 这都只一个属性设置了,还不简单吗......
kevin.luo.sl的签名

评分

举报 使用道具 TOP

只看该用户 #13

谢谢楼主.楼主辛苦了

评分

举报 使用道具 TOP

只看该用户 #14

想问一个比较简单的问题  这个例子是griddata只有一列 如果有2列的话 应该怎么弄呢  我不知道怎么添加进去

评分

举报 使用道具 TOP

只看该用户 #15

我看帖,我回帖,我美德!

受教了
@

评分

举报 使用道具 TOP

只看该用户 #16

感谢分享

评分

举报 使用道具 TOP

只看该用户 #17

好例子学习了
285077078的签名
成功=兴趣+信心+努力

评分

举报 使用道具 TOP

只看该用户 #18

楼主好热心啊,继续加油啊

评分

举报 使用道具 TOP

只看该用户 #19

代码中修改啊!复制-----粘贴-----改名称!
mienx的签名
退休职工米花

评分

举报 使用道具 TOP

只看该用户 #20

想问一个比较简单的问题  这个例子是griddata只有一列 如果有2列的话 应该怎么弄呢  我不知道怎么添加进去
-- by 会员 zclss2520 (2009-4-21 21:35:59)


代码中修改啊,复制---粘贴-----改名字!!
mienx的签名
退休职工米花

评分

举报 使用道具 TOP

只看该用户 #21

谢谢楼主的辛勤劳动
mienx的签名
退休职工米花

评分

举报 使用道具 TOP

只看该用户 #22

谢谢楼主~~~~~~学习~~~~~

评分

举报 使用道具 TOP
艾睿会员有特权,登陆后广告自动屏障。现在就花5秒钟免费注册!更有好礼相送!