注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

给DataGrid加一个自动序列rowIndex的列  

2008-12-01 11:57:24|  分类: Flex 组件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

给DataGrid加一个自动序列rowIndex的列 - 阿蔡 - 古越之地

在桌面应用程序开发的时候,我们经常会给DataGrid或者表格的第一列加上行序列号,以此给用户一个提示当前数据所在的行号,就类似于Excel的左边列。Flex的DataGrid并没有自动提供这样的属性。那么如何解决这个问题呢,方法有很多种,我们可以在DataGrid的数据源dataProvider中添加这样的行序列号,这个方法的弊端就是这个序列号和行数据(row data)绑定在一起,当DataGrid经过排序后,这个序列号就面目全非了。

删除(在这里我提供一个更加简单实用的方法。利用的就是DataGridColunm的listData属性,该属性有一个rowIndex。

效果图如上,第一列的索引(index)是独立于数据源dataProvider的,而且其他DataGridColumn的排序也不会影响第一列序号的正确性。利用下面的两行代码就能实现这一的效果。)

【编辑修改】

经过测试,发现一个bug,当数据多出现竖向滚动条时,下一屏的索引出错。

用另外一种更加直接简单的办法是用labelFunction和dataProvider数据源的获取当前索引号方法可以解决。

最新代码如下:

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">     

<mx:Script>

<![CDATA[

      import mx.events.FlexEvent;

      import mx.events.ScrollEvent;

      import mx.controls.dataGridClasses.DataGridColumn;

      import mx.collections.XMLListCollection;

      import mx.collections.ArrayCollection;

      private var xml:XML = <root>

            <vo region='southwest1' name='name1' id='id1' actual='111' estimate='1111'/>

            <vo region='southwest2' name='name2' id='id2' actual='222' estimate='2222'/>

            <vo region='southwest3' name='name3' id='id3' actual='333' estimate='3333'/>

            <vo region='southwest4' name='name4' id='id4' actual='444' estimate='4444'/>

            <vo region='southwest5' name='name5' id='id5' actual='555' estimate='5555'/>

            <vo region='southwest6' name='name6' id='id6' actual='666' estimate='6666'/>

            <vo region='southwest7' name='name7' id='id7' actual='777' estimate='7777'/>

            <vo region='southwest8' name='name8' id='id8' actual='888' estimate='8888'/>

            <vo region='southwest9' name='name9' id='id9' actual='999' estimate='9999'/>

            <vo region='southwest' name='name10' id='id10' actual='111' estimate='3333'/>

            <vo region='southwest' name='name11' id='id11' actual='111' estimate='3333'/>

            </root>;

      [Bindable]

      private var dpFlat:XMLListCollection = new XMLListCollection(xml.vo);

     

      private function LabFunc(item:Object, column:DataGridColumn):String

      {

            return ((dpFlat.getItemIndex(item)+1).toString());

      }

]]>

</mx:Script>

      <mx:DataGrid id="myADG" dataProvider="{dpFlat}" horizontalScrollPolicy="auto"

      width="100%" height="100%" minWidth="500">           

      <mx:columns>

            <mx:DataGridColumn labelFunction="LabFunc" width="30" minWidth="10" sortable="false" headerText="NO." resizable="false"/>

            <mx:DataGridColumn dataField="@region" headerText="Region" />                

            <mx:DataGridColumn dataField="@name" headerText="Name"/>

            <mx:DataGridColumn dataField="@id" headerText="Id"/>

            <mx:DataGridColumn dataField="@actual" headerText="Actual"/>

            <mx:DataGridColumn dataField="@estimate" headerText="Estimate"/>                               

      </mx:columns>

</mx:DataGrid>         

</mx:Application>

源码下载 | Sample下载

----------------------------------------老的代码如下,存在bug-------------------------------------:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

      import mx.controls.dataGridClasses.DataGridColumn;

      import mx.collections.XMLListCollection;

      import mx.collections.ArrayCollection;

      private var xml:XML = <root>

            <vo region='southwest1' name='name1' id='id1' actual='111' estimate='1111'/>

            <vo region='southwest2' name='name2' id='id2' actual='222' estimate='2222'/>

            <vo region='southwest3' name='name3' id='id3' actual='333' estimate='3333'/>

            <vo region='southwest4' name='name4' id='id4' actual='444' estimate='4444'/>

            <vo region='southwest5' name='name5' id='id5' actual='555' estimate='5555'/>

            <vo region='southwest6' name='name6' id='id6' actual='666' estimate='6666'/>

            <vo region='southwest7' name='name7' id='id7' actual='777' estimate='7777'/>

            <vo region='southwest8' name='name8' id='id8' actual='888' estimate='8888'/>

            <vo region='southwest9' name='name9' id='id9' actual='999' estimate='9999'/>

            <vo region='southwest' name='name10' id='id10' actual='111' estimate='3333'/>

            <vo region='southwest' name='name11' id='id11' actual='111' estimate='3333'/>

            </root>;

      [Bindable]

      private var dpFlat:XMLListCollection = new XMLListCollection(xml.vo);

     

]]>

</mx:Script>

<mx:DataGrid id="myADG" dataProvider="{dpFlat}" horizontalScrollPolicy="auto"

      width="100%" height="100%" minWidth="500">           

      <mx:columns>

            <mx:DataGridColumn width="30" minWidth="10" sortable="false" headerText="NO." resizable="false">

            <mx:itemRenderer>

            <mx:Component>

                  <mx:DataGridItemRenderer >

                  <mx:Script>

                  <![CDATA[

                        import mx.controls.dataGridClasses.DataGridListData;

                        override public function set data(value:Object):void{

                              super.data = value;

                              var dgListData:DataGridListData = listData as DataGridListData;

                              dgListData.label = (dgListData.rowIndex+1).toString();                                                                        }

                  ]]>

                  </mx:Script>

                  </mx:DataGridItemRenderer>

            </mx:Component>

            </mx:itemRenderer>

            </mx:DataGridColumn>

            <mx:DataGridColumn dataField="@region" headerText="Region" />                

            <mx:DataGridColumn dataField="@name" headerText="Name"/>

            <mx:DataGridColumn dataField="@id" headerText="Id"/>

            <mx:DataGridColumn dataField="@actual" headerText="Actual"/>

            <mx:DataGridColumn dataField="@estimate" headerText="Estimate"/>                               

      </mx:columns>

</mx:DataGrid>         

</mx:Application>

注意粗体的两行代码。

源码下载 | Sample下载

 
  评论这张
 
阅读(3537)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017