Flex 迷你教程 — 在AdvancedDataGrid中合并单元格 (合并行)

Posted by Kevin Luo at 20 December 2009

Category: Flex 迷你教程, 开源控件

Tags: , , ,

在项目中我们对DataGrid的要求是很高的,但很不幸的Flex 的DataGird的功能是很傻的,这就催生了AdvancedDatgrid, 它确实解决了很多DataGrid不能做的事,比如多级排序,单元格选择,树状显示数据,合并表头等,但是不知道为什么它确忘记了 “合并单元格”这么重要的事。好在牛人是很多的,于是出现了MecGrid, NecGrid这样不错的能解决单元格合并的DataGrid, 不过他们都各有缺点。

MecGrid: (http://www.mechansp.com/index.php)

1. 不支持itemrender。
2. 单元格选择时无法获知整行数据。
3. 不支持xxxFunction设置比如(labelFunction)
4. 设置很不方便。在column设置中大量使用 number作为参数,非常非常的不利于使用,在线文档对这个ResourceXML的设置也没有提到具体细节,这个很头痛.

总结: MecGrid的使用非常不方便,而且完全不支持复杂数据类型,虽然实现了很多功能但都是固定功能,扩展性不强。这让他局限在只能作为表格使用。
NEC Grid (http://www.necst.co.jp/product/ibiz/column/ibizblock/chap7.html)

nec

1. 不能改变行高。
2. 破换了itemrender的使用,我增加了一个ComboBox作为itemrender,但是他的显示完全不正常。如果itemrender的高度大于他的默认行高,显示会被切断。
3. 不支持单元格选择。

总结:这个DataGrid的使用非常方便,不过缺点也比较明显,尤其是对itemrender这条,要命的是他不能改变行高,但实际中我们的数据是很有可能换行的。另外他居然不支持单元格选择,作为一个AdvancedDatagird,单元格选择在很多时候是必要的。总的来说这个DataGrid用于对数据操作没有特殊要求的用户是不错的选择。

—————————-废话结束,教程开始的分割线—————————————


在看完了老美和日本人做的DataGrid后找到一个韩国人做的,名字就叫AdavcnedDataGrid, 相比Mec和Nec, 扩展的功能比较单一,Bug也非常多,只有合并单元格功能,基于Flex 的AdvancedDataGrid实现。不过也是保留原有 AdvancedDataGrid功能最完整的, 为了和Flex AdvancedDataGrid 区分,我叫它KAdvancedDataGrid。

KAdvancedDataGrid (http://code.google.com/p/advanceddatagrid/)

文章末尾是KadvancedDataGird的下载,相对于原版,我修复了如下内容:

  1. 动态使用columns = XXXX不起作用。
  2. 当列数据为复杂类型时异常。
  3. 设置dataProvider为null时异常。
  4. 还有一些其他的异常,忘了…..

KAdvancedDataGrid的使用很简单,使用groupedColumns标签,把想要合并的列放进去,他会自动的将相同内容的单元格合并在一起。

如下图:

kad

本例的代码在文章末尾,测试代码很简单,这里就不过多解释了,大家可以下载测试。

KAdvancedDataGrid的应用展示

下面几张截图是我使用KadvancedDataGrid作为原材料制作的显示员工出勤情况的日历控件(Calendar View),包括Day, Week, Month和Year View.  这里显示的是Week, Month 和Year View. 使用前面的MecDataGrid或者NecGrid要想实现这样的DatGrid比较困难,Mec是灵活性不够,只能创建它固定格式的Grid, Nec是无法处理复杂数据类型。图片的分辨率较大,点击查看大图

Month View

monthview

Week View

WeekView

Year View

yearView

源代码

源代码中的AdvancedDataGrid是我修改后的版本,原版可访问http://code.google.com/p/advanceddatagrid/

mergeableDataGrid (833)

24 Comments

  1. flex2007 says

    MecGrid把太多的东西封在XML中,我觉得对开发人员不友好。
    NEC的那个不开源,研究过一段时间就放弃了。
    如果KAdvancedDataGrid是开源的那真的是个好消息。

    Reply

    Kevin Luo Reply:

    恩,KadvancedDataGrid是开源的

    Reply

  2. 北街 says

    太专业,看不懂了,飘过~呵呵

    Reply

    Kevin Luo Reply:

    :)

    Reply

  3. wzhelp says

    不错是个好东西,非常感谢楼主

    Reply

  4. joseph says

    好东西啊!~正愁着flex合并单元格的问题呢。
    这个对我很有帮助。

    Reply

  5. joseph says

    下载看了下,发现奇数行偏低,偶数行偏高,不知是bug还是为了测试行高故意的呢?
    还有一个问题请教楼主,就是如果想在表格最后加上一行来求各列平均值的,这种需求也挺常见,不知有什么解决方案没。

    Reply

  6. Ginger says

    你好, 我被您设计的表格结构震撼了 竟然有这么漂亮的界面 可见您付出了多少汗水
    我想问: 能否有这样的视频呢?
    功能如下: 现在您的表格的数据源是已经定义好的xml文档,能否根据未知的xml数据和结构,动态的产生表格?而且产生的表格具有合并单元格的功能呢?

    Reply

    Kevin Luo Reply:

    当然可以用定义好的XML生成DataGrid, 但是XML格式的结构必须是已知的,因为你需要写一个方法来解析你的XML生成DataGrid. 表格具有合并功能是已经写在表格的功能里了,所以无所谓你是用XML来动态生成还是直接写。 附件就是这个有合并功能的DataGrid,你可以下载看看。

    Reply

    Ginger Reply:

    你好 感谢您白忙之中及时的答复
    我已经解析好了xml 但是在怎么用已经解析的xml的问题上有困惑了好长时间
    困惑的是:我怎么样将xml的根节点也加到表头上呢?
    难道您的意思是:我将解析后的xml负值给您在TestAdvancedDataGrid中的?
    再次感谢您了

    Reply

  7. Ginger says

    如果可以您可以共享这样的教程
    不胜感激

    Reply

  8. lantian says

    您好!
    我想知道你是怎么让单元格中的文本垂直居中的啊?

    Reply

    Kevin Luo Reply:

    我没有垂直居中,是靠左的。不过应该可以在itemRender里让他垂直居中,这您试过吗?

    Reply

  9. Ginger says

    你好 看到你的表格的表头部分是两层嵌套的,
    请问 表头部分能层次为三层+嵌套,四层嵌套的,甚至更多层次吗?
    如果可以, 请问数据的格式应该是什么样的呢?

    希望得到您的答复
    谢谢

    Reply

  10. Edison says

    不晓得高级表格都要支持什么样的功能
    完全和word里面的表格一样吗?
    记得之前做过一个Flex-Table,不过很难用,有很多BUG
    期待有时间在FLEX里面实现一个word table

    Reply

  11. haha says

    請問 KAdvancedDataGrid 怎麼在 flash builder 4 上使用
    我該怎麼設定?

    不好意思 我是新手
    謝謝

    Reply

  12. Justic says

    Thx for share ~~~

    Reply

  13. tq says

    请问一下,这个表格怎么导出到EXCEL呢?貌似有合并单元格,不好处理啊
    求答复!!

    Reply

    Kevin Luo Reply:

    导出CSV格式吧,那里面是XML格式我记得,不是很清楚能不能支持合并单元格的格式,你可以查查

    Reply

  14. dany says

    private var carplanlist:ArrayCollection = new ArrayCollection([
    {adfad:"",
    month1:{Dnum:0, Qnum:0,Onum:0},
    month2:{Dnum:0, Qnum:0,Onum:0},
    month3:{Dnum:0, Qnum:0,Onum:0},
    month4:{Dnum:0, Qnum:0,Onum:0},
    month5:{Dnum:0, Qnum:0,Onum:0},
    month6:{Dnum:0, Qnum:0,Onum:0},
    month7:{Dnum:0, Qnum:0,Onum:0},
    month8:{Dnum:0, Qnum:0,Onum:0},
    month9:{Dnum:0, Qnum:0,Onum:0},
    month10:{Dnum:0, Qnum:0,Onum:0},
    month11:{Dnum:0, Qnum:0,Onum:0},
    month12:{Dnum:0, Qnum:0,Onum:0}}]);

    我用了韩国人的,动态绑定的数据,我想通过双击修改数据时行保存到数据库。 但修改时我无法获得到我修改的是那个month* 的数据,大家有什么办法没?

    Reply

    Kevin Luo Reply:

    双击的时候那个cell对应的data就是这一行绑定的数据

    Reply

  15. rachel says

    “Mec是灵活性不够,只能创建它固定格式的Grid, ”
    Mec可以通过程序在运行时刻自由构造,

    Reply

    Kevin Luo Reply:

    我不是说他不能runtime是构建,是说他的限制比较多,主要是开始写的那些:)

    Reply

Leave a Reply

Leave a Reply
  • (required)
  • (required) (will not be published)