Блог

Я использую табулятор 4.8 (tabulator.info )

Я вижу документацию по добавлению вложенных таблиц в строки табулятора (http://tabulator.info/examples/4.8#nested-tables )

Я хотел бы сделать что-то подобное, но вместо этого добавить таблицу табулятора в ячейку таблицы табулятора.

Я читал о пользовательском форматировании ячеек (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>"; , я вижу эту простую таблицу, но я хотел бы видеть таблицу табулятора там.

Любые советы о том, как это сделать?

Я не уверен, что включение в ячейку целой другой таблицы — отличный способ продолжить, это может создать очень кластеризованный пользовательский интерфейс.

Но при этом, если это то, что вам нужно, то причина, по которой это не удается по двум причинам: вы пытаетесь вернуть экземпляр табулятора, а не содержащий элемент, и вы создаете свою таблицу в элементе таблицы до того, как он был добавлен в DOM, поэтому табулятор не может вычислить таблицуразмеры для правильного размещения.

В этом случае вам нужно будет определить таблицу в onRendered обратном вызове, переданном в третий аргумент formatter, это гарантирует, что контейнер был добавлен в 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;
    }