前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Wijmo5 Flexgrid基础教程:合并单元格文字样式

在上文中,我们已经介绍如何合并单元格,本文就在上文的基础上介绍如何更改合并单元格的样式。对于单元格的样式,我们之前介绍过通过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 = '
' + cell.innerHTML + '
'; wijmo.setCss(cell.children[0], { position: 'relative', top: '50%', transform: 'translateY(-50%)' }); } } }

PS: 关于ComponentOne,这些产品你可以关注>>
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!

本站文章除注明转载外,均为本站原创或翻译

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言