Табулятор переключает все вложенные таблицы

Question

Привет! Я хочу использовать вложенные таблицы в Табуляторе, как показано в примере в документах.

[https://jsfiddle.net/2Lnyrqg4/]

var nestedData = [
{id:1, make:"Ford", model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[
   {date:"01/02/2016", engineer:"Steve Boberson", actions:"Changed oli filter"},
   {date:"07/02/2017", engineer:"Martin Stevenson", actions:"Break light broken"},
]},
{id:1, make:"BMW", model:"m3", reg:"W342 SEF", color:"red", serviceHistory:[
   {date:"22/05/2017", engineer:"Jimmy Brown", actions:"Aligned wheels"},
   {date:"11/02/2018", engineer:"Lotty Ferberson", actions:"Changed Oil"},
   {date:"04/04/2018", engineer:"Franco Martinez", actions:"Fixed Tracking"},
]},
]

  const table = new Tabulator("#example-table", {
height: "311px",
layout: "fitColumns",
resizableColumns: false,
data: nestedData,
columns: [{
    title: "Make",
    field: "make"
  },
  {
    title: "Model",
    field: "model"
  },
{
  title: "Registration",
  field: "reg"
},
{
  title: "Color",
  field: "color"
},
],
rowFormatter: function(row) {
//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);

row.getElement().appendChild(holderEl);

var subTable = new Tabulator(tableEl, {
  layout: "fitColumns",
  data: row.getData().serviceHistory,
  columns: [{
      title: "Date",
      field: "date",
      sorter: "date"
    },
    {
      title: "Engineer",
      field: "engineer"
    },
    {
      title: "Action",
      field: "actions"
    },
  ]
})
},
});

Что я хочу сделать чтобы иметь возможность скрыть и показать все вложенные таблицы одним щелчком мыши, я нашел несколько примеров переполнения стека для переключения отдельных строк, но я хочу иметь возможность скрыть все из них, но я не могу понять это

Спасибо

Answer 1

Для этого я предлагаю добавить свойство к данным строки «tableOpen», чтобы вы меняли его состояние при каждом обнаружении вложенной таблицы.

Вам нужно будет решить, как переключать это свойство, либо по щелчку строки, либо по щелчку элемента, добавленного средством форматирования строки.

Затем в rowFormatter вы должны проверить, было ли tableOpen равным true перед добавлением таблицы.

rowFormatter: function(row) {
    //setup nested table

    //append table if needed
    if(row.getData().tableOpen){
        row.getElement().appendChild(holderEl);
    }
}

Для переключения всех таблиц вы можете использовать функцию getRows , чтобы получить массив всех таблиц Компоненты строки , а затем вызовите функцию update в каждой строке, чтобы установить свойство столбца, а затем активируйте переформатирование который затем добавит или удалит вложенную таблицу.

var rows = table.getRows();

rows.forEach(function(row){
    row.update({tableOpen:true});
    row.reformat();
});