国家  china

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

 

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

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

对于单元格的样式,我们之前介绍过通过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感兴趣,可以到如下链接下载:

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

 

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

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

 

请参考Wijmo5技术文章汇总

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

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/wijmo_flexgrid_mergestyle.aspx

不允许评论