Wijmo5 Flexgrid基础教程：合并单元格-控件新闻-慧都网

Wijmo5 Flexgrid基础教程：合并单元格

转帖|使用教程|编辑：龚雪|2016-02-03 09:22:59.000|阅读 636 次

概述：Wijmo5的flexgrid支持合并单元格，本文主要为大家介绍如何合并单元格的内容。

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

相关链接：

Wijmo5的flexgrid支持合并单元格，这个时候需要设置allowMerging属性为wijmo.grid.AllowMerging.All。然后对于需要合并的列，设置allowMerging为true。代码参考：

columns: [
{ header: 'id', binding: 'id', width: 50, isReadOnly: true, allowMerging: true },
{ header: 'country', binding: 'country', width: 100, allowMerging: true },

],

这样时候，就会实现自动的合并单元格内容。对于合并单元格，选择的时候依然不会直接选择所有合并的行。如果想要实现这个功能，需要实现两点。

1. 设置selectionMode

通过修改selectionMode为wijmo.grid.SelectionMode.RowRange，能够选择多行。

2. 在selectionChanged事件里多选

判断选择的是单个单元格，还是合并单元格，从而通过select方法改变选择的范围。代码参考：

if (grid.getMergedRange(e.panel, e.row, e.col) != null) {
if (grid.getMergedRange(e.panel, e.row, e.col).isSingleCell == false) {
grid.select(grid.getMergedRange(e.panel, e.row, e.col), true);
}
}
});

这时就能实现合并单元格，以及合并单元格的行选。

更多内容请下载示例查看：

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

标签：JavaScript HTML5 UI工具包

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

文章转载自：慧都控件网

上一篇：jQuery EasyUI使用教程：在数据网格中添加复选框下一篇：Visual Paradigm使用技巧：使用故事板和用户故事捕捉需求

永利最大(官方)网站

在线采购

中文文档库

试用/Demo下载

开发社群