將嵌套數據表添加到 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;
    }