Tabulator切换所有嵌套表

Question

嗨，我想按照文档中的示例在Tabulator中使用嵌套表

[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函数获取所有表的数组Row Components，然后在每一行上调用update函数设置列的属性，然后触发reformat，然后将添加或删除嵌套表。

var rows = table.getRows();

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