彩票走势图

Wijmo5 Flexgrid基础教程:自定义合并

转帖|使用教程|编辑:龚雪|2016-02-05 09:16:11.000|阅读 449 次

概述:对于合并单元格的内容,我们在之前的章节已经介绍过。但是在一些情况下,合并单元格是依附某种条件。本文就来介绍如何自定义合并的逻辑。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

<Wijmo Enterprise下载>

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

调用自定义的合并:

Wijmo5 Flexgrid基础教程:自定义合并
grid.mergeManager = new wijmo.grid.CustomMergeManager(grid, '序号');

结果如下:

Wijmo5 Flexgrid基础教程:自定义合并

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

详细的请参考如下的Demo::

PS: 关于ComponentOne,这些产品你可以关注>>
本文转载自
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!优惠详情点击查看>>
新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>

标签:JavaScript HTML5UI工具包

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP