Flex Hack 02:DataGrid列尾,用于数据汇总
2009-09-23 00:00:00 来源:WEB开发网Excel的表格中会在在一组数据的后面有一行数据来显示这个表格的某一列的平均数,最大值,最小值等,在Flex中做些小动作也能做出类似效果。
其实Alex Harui早已经为我们做了要求,我们先看运行效果:
其实原理很简单就是在重写DataGrid在列尾添加一个UIComponent即取名为:DataGridFooter,让它去展现平均数,最大值等,在这里最重要的是重写DataGridColumn,在这个类中我们添加一个footerColumn:DataGridColumn,让这个 footerColumn的labelFunction计算出对应的平均数,最大值等处理(关于labelFunction的使用请看这里:Flex Hack 01:labelFunction的使用),代码如下:
import mx.controls.dataGridClasses.DataGridColumn;
[DefaultProperty("footerColumn")]
public class FooterDataGridColumn extends DataGridColumn
{
public function FooterDataGridColumn()
{
super();
}
/**//**
* 用这个对应的labelFunction计算出这一列的最大值或最小值等等
* **/
public var footerColumn:DataGridColumn;
}
然后就是重写DataGrid,用于显示列尾 ,如重写createChildren方法:
override protected function createChildren():void
{
super.createChildren();
if (!footer)
{
footer = new DataGridFooter();
footer.styleName = this;
addChild(footer);
}
}
再就重写adjustListContent方法以确定footer的位置:
override protected function adjustListContent(unscaledWidth:Number = -1,
unscaledHeight:Number = -1):void
{
super.adjustListContent(unscaledWidth, unscaledHeight);
listContent.setActualSize(listContent.width, listContent.height - footerHeight);
footer.setActualSize(listContent.width, footerHeight);
footer.move(listContent.x, listContent.y + listContent.height + 1);
}
同时当有一些属性更改或拖动来更新footer的位置等等,那么我们还有重写一个方法:
override public function invalidateDisplayList():void
{
super.invalidateDisplayList();
if (footer)
footer.invalidateDisplayList();
}
还有一个类DataGridFooter,这个就是我们的主角,用于显示列尾的数据,关于这个类没什么特别的,就是计算他们的位置显示等等,有兴趣的朋友可以在下面的资料中下载代码看看。
http://blogs.adobe.com/aharui/DataGridFooter3/dg.swf
更多精彩
赞助商链接