将嵌套数据 table 添加到制表符 table 中的制表符单元格

Question

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

我看到了将嵌套 tables 添加到制表符行 (http://tabulator.info/examples/4.8#nested-tables)

的文档

我想做一些与此类似的事情，但是将制表符 table 添加到制表符 table 的单元格中。

我阅读了单元格的自定义格式设置 (http://tabulator.info/docs/4.0/format#format-custom)，看到它说格式设置函数必须 return 字符串、有效的 html 或 DOM 节点。

我尝试了类似下面的操作（按照行中嵌套 table 的示例）：

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"},
],

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

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

Answer 1

我不确定在单元格中包括整个其他 table 是否是继续进行的好方法，它可能会创建一个非常聚集的 UI。

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

在这种情况下，您需要在传递给格式化程序的第三个参数的 onRendered 回调中定义 table，这将确保容器已添加到 dom在单元格被渲染之后。你会注意到我们现在 returning holder element from the formatter 而不是 table instance:

//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;
    }

将嵌套数据 table 添加到制表符 table 中的制表符单元格

Adding nested data table to a Tabulator cell in a Tabulator table

javascript

nested

formatter

tabulator