给DataGrid加一个自动序列rowIndex的列
发布时间:2020-12-15 01:03:08 所属栏目:百科 来源:网络整理
导读:在桌面应用程序开发的时候,我们经常会给DataGrid或者表格的第一列加上行序列号,以此给用户一个提示当前数据所在的行号,就类似于Excel的左边列。Flex的DataGrid并没有自动提供这样的属性。那么如何解决这个问题呢,方法有很多种,我们可以在DataGrid的数据
在桌面应用程序开发的时候,我们经常会给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> ----------------------------------------老的代码如下,存在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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |