Tabulator перетащить строку в div - PullRequest
Новая
       15

Tabulator перетащить строку в div

1 голос
/ 14 апреля 2020

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

Я пытался использовать <div ondrop="drop(event)">, с функцией удаления, обновляющей таблицу, но drop Функция не срабатывает, когда я опускаю строку.

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

I Мне было интересно, есть ли простое решение для этого.

ОБНОВЛЕНИЕ: вот простой фрагмент кода с примером того, чего я хотел бы достичь: 

var data1 = [{
    "name": "John",
    "city": "New York"
  }, {
    "name": "Bob",
    "city": "Los Angeles"
  }],
  data2 = [{
    "name": "Vince",
    "city": "Tampa"
  }, {
    "name": "Yan",
    "city": "Austin"
  }];

var table1 = new Tabulator("#table1", {
    data: data1,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table2",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  }),

  table2 = new Tabulator("#table2", {
    data: data2,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table1",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  });
  
  // this is the funciton that is not working, i don't know what event looks like or contains, but hoping it has the row I'm dropping. To delete from table1 I was thinking of using tabulator's callbacks
  function drop(event){
    table1.deleteRow();
    table2.addRow();
    console.log(event); // this doesn't log anything, suggesting the funciton is not being called
  };
.tabulator{
margin: 30px;
}

.box{
background: #888;
color: #fff;
}
<script src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table1" class="tabulator"></div>
<div id="table2" class="tabulator"></div>

<div id="div_to_drag_to_update_table2" ondrop="drop(event)">
<div class="box">
I would like to drag rows from table 1 here and they go in table 2
</div>
</div>

Спасибо

...