Wijmo5Flexgrid基础教程【四】之合并单元格,合并单元格文字样式

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);
}
}
});

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

在上文中，我们已经介绍如何合并单元格，本文就在上文的基础上介绍如何更改合并单元格的样式。对于单元格的样式，我们之前介绍过通过itemFormatter就可以设置，合并单元格的样式，也可以通过它来设置。用户需要通过getMergeRange方法判断是否是合并单元格，然后对于合并单元格修改样式。

样式中比如，文字居中。文字水平的位置通过style.textAlign属性设置居中，文字竖直居中通过css样式来设置。总得来说，代码参考如下：

itemFormatter: function (panel, r, c, cell) {
// validate CellType and if merge cell
if (wijmo.grid.CellType.Cell == panel.cellType
) {
var range = panel.grid.getMergedRange(panel, r, c);
if (range) {
cell.style.textAlign = 'center';
cell.innerHTML = '<p>' + cell.innerHTML + '</p>';

wijmo.setCss(cell.children[0], {
position: 'relative',
top: '50%',
transform: 'translateY(-50%)'
});
}
}
}