制表符 - 在字体大小更改时调整列 Header 的大小

Question

我正在使用 Tabulator 和默认的 "fitData" 函数来调整单元格的大小。当我 a) 设置了默认字体大小和 b) 使用 rowFormatter:

更改行字体大小时，这完全符合预期

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

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

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

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

Answer 1

您不应尝试从 table 外部以编程方式更改 Tabulator 内部的元素。因为 Tabulator 使用虚拟 DOM 这些更改可以随时被覆盖，恕不另行通知。

如果您需要格式化列 header 标题，您应该在列定义中使用 titleFormatter想要改变：

//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/format

如果您需要继续使用您的方法，那么您可以调用 table redraw 函数来强制 table 待重建：

table.redraw(true);

您是否有理由需要在运行时更改它，而不是仅在 CSS 时进行更改？

制表符 - 在字体大小更改时调整列 Header 的大小

Tabulator - Having Column Header Resize when Font Size Changes

tabulator