【表头高度自适应】FlexGrid怎样实现列头高度自适应？

登录

列头自适应是一个常见的需求，在FlexGrid中，默认情况下，
列头高度是固定的。很多同学都被这个功能所困扰，用了一些
特别复杂和不友好的方式尝试实现它（譬如直接操作列头DOM之类）

实际上，多查API是个好习惯，在这个场景下，用一个简单的“单元格模板”
就可以非常轻松实现这个功能 —— itemFormatter，
参考API地址：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#itemformatter

API是纯英文的，我这里做个很简单的解释：

Gets or sets a formatter function used to customize cells on this grid.
—— 获取或设置一个格式方法，用以自定制单元格cell的样式

因此，我们可以把能够自适应高度的DOM，通过这个方法轻松“植入”到
列头上，实现自适应列头高度的功能。自适应高度DOM的实现网上可以搜到几十种，
这里提供一种实现：

flex1.itemFormatter = function (panel,r,c,cell) {
if (wijmo.grid.CellType.Cell == panel.cellType && c!==1 && !panel.grid.editRange) {
cell.innerHTML = '<div>' + cell.innerHTML + '</div>';
wijmo.setCss(cell, {
display: 'table',
tableLayout: 'fixed'
});
var ch = cell.children[0];
wijmo.setCss(ch, {
display: 'table-cell',
verticalAlign: 'middle',
textAlign: 'center'
});
}
}

复制代码

完整示例参考附件。

		自动登录	找回密码
密码			立即注册

【表头高度自适应】FlexGrid怎样实现列头高度自适应？

本帖子中包含更多资源

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章