Табулятор: как изменить локальный массив при удалении строк? - PullRequest
Новая
       24

Табулятор: как изменить локальный массив при удалении строк?

0 голосов
/ 19 января 2020

Я пытаюсь создать интерактивную таблицу, которая может быть изменена пользователем. В моем случае исходный набор данных представляет собой локальный массив объектов.

В Tabulator есть опция buttonCross для удаления строк, но она влияет только на визуальные элементы таблицы. Как мне сделать так, чтобы он нашел соответствующий объект в строке и удалил его из массива tabledata?

Вот код, с которым я работаю: 

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 здесь . Буду очень признателен за несколько советов о том, как сделать эту работу!

Ответы [ 2 ]

1 голос
/ 19 января 2020

Рабочий пример для табулятора

функция 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();
      }
0 голосов
/ 19 января 2020

Вы также можете использовать табулятор в Режим реактивных данных

В этом режиме он будет обновлять таблицу в реальном времени, чтобы соответствовать предоставленному массиву данных при его изменении, и наоборот. наоборот, он обновит массив в соответствии с таблицей.

. Для этого установите для свойства reactiveData значение true в объекте конструктора таблиц. 

//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"},
    ]
});

Затем он будет поддерживать связь с исходным источником данных

...