将嵌套数据表添加到 Tabulator 表中的 Tabulator 单元格

Question

我正在使用 Tabulator 4.8 (tabulator.info)

我看到了将嵌套表添加到 Tabulator 行的文档（ http://tabulator.info/examples/4.8#nested-tables ）

我想做类似的事情，而是将 Tabulator 表添加到 Tabulator 表的单元格中。

我阅读了关于单元格的自定义格式（ http://tabulator.info/docs/4.0/format#format-custom ）并看到它说格式函数必须返回一个字符串、有效的 html 或 DOM 节点。

我尝试了以下内容（按照行中嵌套表的示例）：

columns:[ //Define Table Columns
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col", formatter:function(cell){
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";
       holderEl.appendChild(tableEl);
       cell.getElement().appendChild(holderEl);

       var subTable = new Tabulator(tableEl, {
           layout:"fitColumns",
           data:tabledata,
           columns:[
           {title:"Name", field:"name", width:150},
           {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
           {title:"Favourite Color", field:"col", formatter:"star", formatterParams:{stars:6}},
           {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
           ]
       })
    return subTable;
    }},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],

但这不会在单元格中显示为嵌套表。 当然如果我return "<table><tr><td>test</td></tr></table>"; ，我看到了那个简单的表格，但我想在那里看到制表符表格。

关于如何做到这一点的任何提示？

Answer 1

我不确定在单元格中包含一个完整的其他表格是一个很好的方法，它可能会创建一个非常集群的 UI。

但话虽如此，如果这就是您所需要的，那么失败的原因有两个，您正在尝试返回制表符实例而不是包含元素，并且您正在将表格元素添加到表格元素之前在表格元素上创建表格DOM 因此制表器无法计算表格尺寸以正确布局。

在这种情况下，您需要在传递给格式化程序的第三个参数的onRendered回调中定义表格，这将确保在呈现单元格后将容器添加到 dom。 你会注意到我们现在从格式化程序返回 holder 元素而不是表实例：

//NOTICE - onRendered function passed into the third argument of the formatter
{title:"Favourite Color", field:"col", formatter:function(cell, formatterParams, onRendered){
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";
       holderEl.appendChild(tableEl);
       cell.getElement().appendChild(holderEl);

       //define the table once the cell has been rendered
       onRendered(function(){
           var subTable = new Tabulator(tableEl, {
               layout:"fitColumns",
               data:tabledata,
               columns:[
                   {title:"Name", field:"name", width:150},
                   {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
                   {title:"Favourite Color", field:"col", formatter:"star", formatterParams:{stars:6}},
                   {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
               ]
           })
       });

    //return the element that holds the table
    return holderEl;
    }