Wijmo5 FlexGrid教程（8）- 实现合并单元格文字样式功能

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

发布于 2015/12/09 00:00

WijmoJS

在上一章中，我们已经介绍如何合并单元格：(七)合并单元格内容。

本文就在上一章的基础上介绍如何更改合并单元格的样式。

对于单元格的样式，我们之前介绍过通过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 = '<div>' + cell.innerHTML + '</div>';

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

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

/download/?pid=54

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

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