autoColumnsDefinitions 函数不加载格式化程序或其他任何东西

Question

设置：

• 引导程序 5
• Tabulator 5.4.4 与 tabulator_bootstrap5.css
• macOS Ventura 上的 Brave 浏览器

意图：默认将所有单元格视为html

尝试的解决方案： 使用

autoColumnsDefinitions

函数将所有单元格格式化为 html 单元格。 我使用了 https://tabulator.info/docs/5.4/columns#autocolumns.

中记录的功能

预期：

• html 链接和格式正确呈现。
• 可用头过滤器

实际结果：

• html代码转义显示
• 没有标题过滤器

• autoColumnsDefinitions

  功能代码似乎永远不会运行？

错误信息

• 无

---

HTML 表格

<table class="table table-hover table-sm" id="table-1">
    <thead class="thead-light">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/some/path/">Row 1</a></td>
            <td>plain</td>
            <td><i>running</i></td>
        </tr>
        <tr>
            <td><a href="/some/path/">Row 2</a></td>
            <td>nice</td>
            <td><b>walking</b></td>
        </tr>
    </tbody>
</table>

制表符设置

    var tableOne = new Tabulator("#table-1", {
        autoColumns: true,
        autoColumnsDefinitions: function(definitions) {
            //definitions - array of column definition objects
            definitions.forEach((column) => {
                column.headerFilter = true; // add header filter to every column
                column.formatter = "html";
            });
            return definitions;
        },
    });

渲染结果

Answer 1

通过将

data

参数添加到 Tabulator 构造函数调用来解决问题。该变量必须与实际的表格布局相匹配。假设表格使用了一个

<thead>

，就可以生成数据了

//populate table header data from existing thead (ugly code)
tabledata = [];
let trow = {}
for (let c = 0, cell; cell = document.getElementById("table-1").tHead.rows[0].cells[c]; c++) {
    trow[cell.innerText] = "n/a";
}
tabledata.push(trow);

// init with data argument
var tableOne = new Tabulator("#table-1", {
    data: tabledata,
    autoColumns: true,
    autoColumnsDefinitions: function(definitions) {
        //definitions - array of column definition objects
        definitions.forEach((column) => {
            column.headerFilter = true; // add header filter to every column
            column.formatter = "html";
        });
        return definitions;
    },
});