在上一章中,我们已经介绍如何合并单元格:(七)合并单元格内容。
本文就在上一章的基础上介绍如何更改合并单元格的样式。
对于单元格的样式,我们之前介绍过通过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感兴趣,可以到如下链接下载:
更多资源:
Wijmo中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html
请参考Wijmo5技术文章汇总
《wijmo5 flexgrid基础教程》系列文章