使用 rowFormatter 时添加列（奶酪示例）

Question

我觉得我遗漏了一些简单的东西......关于如何使用 rowFormatter 的奶酪示例正是我想要实现的东西，除了我想添加各种额外的列......

我已经注意到警告 it is important to include only one column in your column definition array to ensure the table renders correctly，但这正是我想要做的。

所以我尝试向 table 构造函数添加另一列，该构造函数添加了列标题但没有数据。

我错过了什么？这肯定是一个常见的用例？

Answer 1

使用与 rowFormatter 相对应的 formatter 选项 - 它会覆盖整个行的内容。

基于 Tabulator docs 中的 printIcon 和 cheese 示例，构建列格式化程序，但将行作为附加到单元格的方式传递。

那么它只是按照奶酪示例构造 html table 的问题，但是 return table，不要附加到元素。

我的测试示例：

//Generate details
    var details = function(row, formatterParams){ //plain text value

        var element = row.getElement(),
        data = row.getData(),
        width = element.outerWidth(),
        table;

        //define a table layout structure and set width of row
        table = $("<table style='width:" + (width - 18) + "px;'><tr></tr></table>");

        //add image on left of row
        $("tr", table).append("<td><img src='./img/teams/small-60x80/55015.png'></td>");

        //add row data on right hand side
        $("tr", table).append("<td><div><strong>Type:</strong> " + data.type + "</div><div><strong>Age:</strong> " + data.age + "</div><div><strong>Rind:</strong> " + data.rind + "</div><div><strong>Colour:</strong> " + data.color + "</div></td>");

        //append newly formatted contents to the row
        //element.append(table);
        return table;

        //return "<image src='./img/teams/small-60x80/55015.png'>";
    };

    //define Tabulator
    $("#example-table").tabulator({
        height:"600px",
        layout:"fitColumns",
        resizableColumns:false,
        columns:[
            {formatter:details},
            {title:"Cheese", field:"type", sorter:"string"},
            {title:"Something Else", field:"blah", sorter:"string"},
        ],

    })

使用 rowFormatter 时添加列（奶酪示例）

Add Column when using rowFormatter (Cheese Example)

tabulator