Question

我觉得我缺少一些简单的东西...如何使用rowFormatter的奶酪示例正是我想要实现的东西，除了我想添加各种其他列...

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

因此，我尝试将另一列添加到表构造函数中，该构造函数添加了列标题但没有数据。

我想念什么？当然这是一个常见的用例吗？

Answer 1

使用formatter附带的rowFormatter选项-覆盖整个行的内容。

基于Tabulator docs中的printIcon和Cheese示例，构造一个列格式化程序，但是将与行相对应的行传递到单元格。

然后仅需按照奶酪示例构造html表，但返回该表，不要将其附加到元素上。

我的测试示例：

//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时添加列（奶酪示例）

1 个答案: