Question

我一直在尝试创建嵌套表，并成功使用了下面的代码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}]);

Answer 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);
}

制表器嵌套表在表更新时复制

1 个答案: