Flex实现DataGrid的序号列
要在Flex的DataGrid里添加序号列,大体上有两种方法:
1.设置DataGridColumn的labelFunction。
其大致的思路是,获取到当前DataGrid的dataProvider及当前行的data,调用getItemIndex方法获取到当前的行的序号。
具体可参考 http://wmcai.blog.163.com/blog/static/480242008111115724283/。这种方法比较直观,也很容易想到。
但重用性很差,其生成序号的labeldFunction无法重用。
2.设置DataGridColumn的ItemRenderer。
即自定义一个itemRenderer来处理序列号的生成。这种方法重用性很高。至于如何生成序号,这里需要些小技巧。
SequenceItemRenderer.as
view plaincopy to clipboardprint?01.package com.carnation.component.common 02.{ 03. import mx.collections.IList; 04. import mx.controls.Label; 05. import mx.controls.listClasses.BaseListData; 06. import mx.controls.listClasses.ListBase; 07. public class SequenceItemRenderer extends Label 08. { 09. public function SequenceItemRenderer() 10. { 11. super(); 12. } 13. 14.// 另一种方法获取dataProvider并调用getItemIndex方法 15.// override public function set data(value:Object):void{ 16.// super.data = value; 17.// text = (((listData.owner as ListBase).dataProvider as IList) 18.// .getItemIndex(data) + 1).toString(); 19.// } 20. override public function set listData(value:BaseListData):void{ 21. super.listData = value; 22. text = ((value.owner as ListBase).itemRendererToIndex(this) + 1).toString(); 23. } 24. } 25.} package com.carnation.component.common
{
import mx.collections.IList;
import mx.controls.Label;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.ListBase;
public class SequenceItemRenderer extends Label
{
public function SequenceItemRenderer()
{
super();
}
// 另一种方法获取dataProvider并调用getItemIndex方法
// override public function set data(value:Object):void{
// super.data = value;
// text = (((listData.owner as ListBase).dataProvider as IList)
// .getItemIndex(data) + 1).toString();
// }
override public function set listData(value:BaseListData):void{
super.listData = value;
text = ((value.owner as ListBase).itemRendererToIndex(this) + 1).toString();
}
}
}
Test.mxml
view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
03. <mx:Script>
04. <!--[CDATA[
05. import com.carnation.component.common.SequenceItemRenderer;
06.
07. private var indexRenderer:Class = SequenceItemRenderer;
08.
09. private function init():void{
10. var array:Array = [];
11. for(var i:int = 1; i <= 10; i++){
12. array.push({name:"name"+i.toString()});
13. }
14. grid.dataProvider = array;
15. }
16. ]]-->
17. </mx:Script>
18. <mx:DataGrid id="grid">
19. <mx:columns>
20. <mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(indexRenderer)}"/>
21. <mx:DataGridColumn headerText="name" dataField="name"/>
22. </mx:columns>
23. </mx:DataGrid>
24.</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
<!--[CDATA[
import com.carnation.component.common.SequenceItemRenderer;
private var indexRenderer:Class = SequenceItemRenderer;
private function init():void{
var array:Array = [];
for(var i:int = 1; i <= 10; i++){
array.push({name:"name"+i.toString()});
}
grid.dataProvider = array;
}
]]-->
</mx:Script>
<mx:DataGrid id="grid">
<mx:columns>
<mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(indexRenderer)}"/>
<mx:DataGridColumn headerText="name" dataField="name"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/shirc/archive/2010/01/22/5222363.aspx