制表符嵌套表复制表更新答案

【问题标题】：Tabulator Nested Table Replicating on Table update制表符嵌套表复制表更新
【发布时间】：2020-04-03 08:05:23
【问题描述】：

我一直在尝试创建一个嵌套表，并成功使用下面的代码 1。我正在尝试创建一个动态 IOT 表，并且每次有新数据来自设备时我都会更新该表，为此我使用了下面的代码 2。但是每当我尝试更新时，更新都是成功的，但是嵌套表正在自我复制，所以我该如何阻止这种情况发生。

================ CODE 1 ==================================
rowFormatter:function(row){

   var holderEl = document.createElement("div");
   var tableEl = document.createElement("div");

   const id = row.getData().id;

   holderEl.style.boxSizing = "border-box";
   holderEl.style.padding = "10px 10px 10px 10px";
   holderEl.style.borderTop = "1px solid #d1ddea";
   holderEl.style.borderBotom = "1px solid #d1ddea";
   holderEl.style.background = "#fff";
   holderEl.setAttribute('class', "subTable" + id + "");

   tableEl.style.border = "2px solid #d1ddea";
   tableEl.setAttribute('class', "subTable" + id + "");

   holderEl.appendChild(tableEl);

   row.getElement().appendChild(holderEl);



   var myRowData = row.getData().customFields;

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
       data:myRowData,
       columns:[
       {title:"Name", field:"n",headerSort:true },
       {title:"Value", field:"v"},
       ]
     })    
}, 
============= CODE 2 ===========================
tableAllUnits.updateData([{id:unit.id, speedformatted:data.speed}]);

【问题讨论】：

标签： javascript nested tabulator

【解决方案1】：

发生这种情况是因为在行更新时第二次调用行格式化程序时，它并没有首先删除旧的嵌套表。

当你创建 holder 元素时，你应该为它分配一个类：

holderEl.classList.add("nested-table")

然后在将元素添加到行之前检查任何预先存在的表并删除它们：

var el = row.getElement();
var nested = el.getElementsByClassName("nested-table");

for(let child of nested){
    child.parentNode.removeChild(child);
}

【讨论】：