KevinChen 发表于 2020-6-30 18:22:45

【表头高度自适应】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;
                wijmo.setCss(ch, {
                        display: 'table-cell',
                        verticalAlign: 'middle',
                        textAlign: 'center'
                });
        }
}

完整示例参考附件。
页: [1]
查看完整版本: 【表头高度自适应】FlexGrid怎样实现列头高度自适应?