Wijmo5 FlexGrid教程（9）- 实现自定义合并功能

对于合并单元格的内容，我们在之前的章节已经介绍过。请参考：(七)合并单元格内容但是在一些情况下，合并单元格是依附某种条件。比如我们有两列，想要根据第一列的情况，判定第二列是否合并。针对这种情况，flexgrid提供了自定义合并的概念，用户可以自定义合并的逻辑。这个是通过重写CustomMergeManager实现的。本文就来介绍如何自定义合并的逻辑。

发布于 2015/12/11 00:00

WijmoJS

对于合并单元格的内容，我们在之前的章节已经介绍过。

请参考：(七)合并单元格内容

但是在一些情况下，合并单元格是依附某种条件。比如我们有两列，想要根据第一列的情况，判定第二列是否合并。针对这种情况，flexgrid提供了自定义合并的概念，用户可以自定义合并的逻辑。

这个是通过重写CustomMergeManager实现的。

本文就来介绍如何自定义合并的逻辑。

如下图所示，我们有这样的界面：

其中第一列序号列自动合并，我们想要预定列也根据序号列进行合并，而不仅仅是根据内容相同的合并。

这个时候就需要自定义MergeManager实现合并。创建一个新类从MergeManager继承，然后通过这个列自定义代码实现不同的合并方式。

逻辑代码参考如下：

CustomMergeManager.prototype._mergeCell = function (p, r1, c1, r2, c2) {
                var row1 = p.rows[r1], row2 = p.rows[r2], mergeState = _super.prototype._mergeCell.call(this, p, r1, c1, r2, c2), mergeKey = this._mergeKey;

                if (mergeState && this._g.allowMerging) {
                    if (wijmo.isString(mergeKey) && this._g.itemsSource) {
                        if (row1.dataItem[mergeKey] !== row2.dataItem[mergeKey]) {
                            mergeState = false;
                        }
                    } else if (wijmo.isNumber(this._mergeKey)) {
                        if (p.getCellData(r1, mergeKey, false) !== p.getCellData(r2, mergeKey, false)) {
                            mergeState = false;
                        }
                    }
                }

                return mergeState;
            };

将这个自定义的逻辑写成JS文件，然后在主页面引用：

<script src="scripts/customMergeManager.js" type="text/javascript"></script>

调用自定义的合并：

grid.mergeManager = new wijmo.grid.CustomMergeManager(grid, '序号');

结果如下：

从图中可以看出来，状态列已经根据第一列进行了合并。

详细的请参考如下的Demo:flexgrid_CustomMerge.zip (74.55 kb)

如果你对Wijmo5感兴趣，可以到如下链接下载：

/download/?pid=54

WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型，推荐如下方式，加速产品评估进度：