Flex 迷你教程 — 在AdvancedDataGrid中合并单元格 （合并行）

Posted by Kevin Luo at 20 December 2009

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

Tags: DataGrid rowspan, Flex 迷你教程, 合并单元格, 开源控件

在项目中我们对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）

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标签，把想要合并的列放进去，他会自动的将相同内容的单元格合并在一起。

如下图：

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

KAdvancedDataGrid的应用展示

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

Month View

Week View

Year View

源代码

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

mergeableDataGrid (2164)