javascript - 制表符:删除行时如何修改本地数组？

Question

我正在尝试构建一个可由用户修改的交互式表格。就我而言，原始数据集是本地对象数组。

制表符具有用于删除行的buttonCross选项，但它仅影响表格视觉效果。如何让它找到该行呈现的匹配对象并将其从表数据数组中删除？

这是我正在使用的代码:

let tabledata = [{
    animal: "hippo",
    color: "grey"
  },

{
    animal: "puma",
    color: "black"
  },
{
    animal: "flamingo",
    color: "pink"
  }

];

let table = new Tabulator("#example-table", {
  data: tabledata,
  layout: "fitDataFill",
  addRowPos: "bottom",
  reactiveData: true,
  headerSort: false,

  columns: [ //define the table columns
    {
      title: "animal",
      field: "animal",
      editor: "input"
    },
    {
      title: "color",
      field: "color",
      editor: "input"
    },
    {
      formatter: "buttonCross",
      width: 40,
      align: "center",
      cellClick: function (e, cell) {
        cell.getRow().delete();
      }
    },

  ],
});

Codepen here 。非常感谢一些关于如何完成这项工作的提示!

Answer 1

Working example for tabulator

filter 函数用于删除集合中的当前项目过滤Filter API .

首先过滤掉不需要的对象，然后将其分配给tabledata。

 cellClick: function (e, cell) {
        debugger;
        var animalToDelete={ animal:cell.getRow().getData().animal,
               color:cell.getRow().getData().color
              };
        var filtered=tabledata.filter(function(x){
          debugger;
          return x.animal!=animalToDelete.animal 
              && x.color!=animalToDelete.color;
        });
        tabledata=filtered;
        cell.getRow().delete();
      }