Wijmo5 FlexGrid教程(9)- 实现自定义合并功能

发布时间:2015/12/11 00:12 发布者:Alice

返回博客中心

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

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

 

但是在一些情况下,合并单元格是依附某种条件。比如我们有两列,想要根据第一列的情况,判定第二列是否合并。针对这种情况,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

 

更多资源:

Wijmo中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html

 

请参考Wijmo5技术文章汇总

 《wijmo5 flexgrid基础教程》系列文章


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网