有才华的人，别忘记给滋润你的那块土壤施肥
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
Flex Hack 02:DataGrid列尾，用于数据汇总
      

         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，这个就是我们的主角，用于显示列尾的数据，关于这个类没什么特别的，就是计算他们的位置显示等等，有兴趣的朋友可以在下面的资料中下载代码看看。

测试例子：点击这里

源文件下载：Download
posted on 2009-08-17 22:27 kissjava 阅读(2467) 评论(6)  编辑  收藏 所属分类: Flex

评论

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2009-08-18 09:51 凡客诚品
不错啊  回复  更多评论
  

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2009-09-02 13:33 的
源文件看起来是对的，但用起来会出现行列不对齐的错误，不能使用  回复  更多评论
  

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2009-09-03 22:13 kissjava
@的
呵呵，是吗？我运行没问题呀

  回复  更多评论
  

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2010-12-20 15:06 fff
当你把datagrid的属性horizontalScrollPolicy="on"的时候（在下面显示滚动条）

这个时候你去拖动列线，改变列宽，右下角的数字就会露到datagrid的外面，有没有解决办法？
  回复  更多评论
  

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2011-01-09 21:43 圣战风云
你给datagrid加一个水平滚动条，你会发现一些BUG  回复  更多评论
  

# re: Flex Hack 02:DataGrid列尾，用于数据汇总 2013-04-07 16:07 伪大神
@kissjava
要是lock了一列，下面的合计行会对不上，这个问题怎么解决？  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: