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

Question

我正在尝试构建一个可以由用户修改的交互式 table。在我的例子中，原始数据集是一个本地对象数组。

Tabulator 有删除行的 buttonCross 选项，但它只影响 table 视觉效果。我怎样才能让它找到该行显示的匹配对象并将其从 table 数据数组中删除？

这是我正在使用的代码：

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 函数用于删除 collection 的当前项目过滤器 Filter API.

先把不需要的object过滤掉再分配给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();
      }

Answer 2

您还可以在 Reactive Data Mode

中使用制表符

在此模式下，它将实时更新 table 以匹配提供的数据数组，反之亦然，它将更新数组以匹配 table.

为此，将 reactiveData 属性设置为 true 在 tables 构造函数对象中。

//create table and assign data
var table = new Tabulator("#example-table", {
    reactiveData:true, //enable reactive data
    data:tableData, //assign data array
    columns:[
          {title:"Name", field:"name"},
          {title:"Age", field:"age", align:"left", formatter:"progress"},
          {title:"Favourite Color", field:"col"},
          {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    ]
});

然后它会用初始数据源

维护一个link

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

Tabulator: how to modify local array when deleting rows?

javascript

dom

html-table

tabulator