制表符 - 字体大小更改时调整列标题大小 [英] Tabulator - Having Column Header Resize when Font Size Changes

问题描述

我使用 Tabulator 和默认的fitData"函数来调整单元格的大小.当我 a) 设置默认字体大小和 b) 使用 rowFormatter 更改行字体大小时，这完全符合预期:

I am using Tabulator and the default "fitData" function to size the cells. This works exactly as intended when I a) Have a default font size set and b) change the row font size using the rowFormatter:

        rowFormatter:function(row){
        var rowData = row.getData();
        row.getElement().style.fontSize = config.body_font_size + "px";

但是，当我想更改列标题的字体大小时，上述方法有效:

The above works, however, when I want to change the font size of the column titles:

var curHeaders = document.getElementsByClassName("tabulator-col");
for (var i = 0; i < curHeaders.length; i++) {
    curHeaders[i].style.fontSize = fontSize.toString() + "px";
}

这会更改所有列的字体大小，但不会适当地调整列宽.是否有不同的类我应该分配字体?有没有办法以类似于 rowFormatter 的方式应用它?

This changes all the column font sizes, but does not resize the column width appropriately. Is there a different class where I should assigning the font? Is there a way to apply this in a similar way to the rowFormatter?

推荐答案

您不应该尝试从表格外部以编程方式更改 Tabulator 中的元素.由于 Tabulator 使用虚拟 DOM，因此这些更改可以随时被覆盖，恕不另行通知.

You shouldn't try and programatically alter elements inside Tabulator from outside the table. Because Tabulator uses a virtual DOM these changes can be overwritten at any point without notice.

如果您需要格式化列标题标题，您应该在要更改的列的列定义中使用 titleFormatter:

If you need to format column header titles you should use a titleFormatter in the column definition for the column you want to change:

//define custom formatter
var customFormatter = function(cell, formatterParams, onRendered){

    //set font size
    cell.getElement().style.fontSize = fontSize.toString() + "px";

    return cell.getValue();
}

//in the column definition for a column
{title:"Name", field:"name", titleFormatter:customFormatter },

有关如何使用格式化程序的完整文档可在此处找到:http://tabulator.info/docs/4.0/格式

Full documentation on how to use formatters can be found here: http://tabulator.info/docs/4.0/format

如果你需要继续使用你的方法，那么你可以调用表格redraw函数来强制重建表格:

If you need to keep using your approach then you can call the table redraw function to force the table to be rebuilt:

table.redraw(true);

是否有理由需要在运行时更改它而不只是在 CSS 中进行更改?

Is there a reason you need to change it at run time rather than just making the changes in CSS?

这篇关于制表符 - 字体大小更改时调整列标题大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！