jQuery Datatable將一列從一個表拖放到另一個表

Question

我正在使用： https ://datatables.net的jquery.dataTables.js

我試圖將一列從一個表拖放到另一個表。

編輯：所以基本上我想做的是：

• 能夠將表2中的名稱拖放到上表中名為name的列中
• 拖放名稱后，該名稱應從表2中消失。

情況2：如果我使用添加新行按鈕添加新行

• 我還需要能夠將表​​2中的名稱拖放到該列名稱中 。

所以基本上我只想在列而不是行中拖放

我不想創建新行，只需將名稱從1個表移到另一個表即可。

編輯2：

1-您可以將倍數值從表＃2拖放到表＃1嗎？ 不可以，拖放操作只能是1乘1。在用戶單擊“編輯”或添加新行后，才可以進行拖放。 所以我將能夠將名稱drom表2替換為列名稱表1

2-如果否，則拖動的值應替換掉的值？ 是

3-如果是，應該如何工作？ 是否添加其他值為空白的新行？ 無需添加任何行，我們只需要替換列名即可。

工作原理：因此，在單擊“編輯”或添加新行后，我將能夠將名稱從表2拖到表1的列中。

其他一些要求：如果選擇表2中的行，則應更改該行的顏色，顯示已被選中。 並且在表1的列名中需要刪除的位置需要更改顏色以顯示用戶可以刪除，在用戶刪除之后，顏色應恢復正常。

在這里工作的示例： http : //plnkr.co/edit/6sbmBzbXDzm4p6CjaVK0?p=preview

  $(document).ready(function() { var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2'; var options = [ { key : 'option 1', value : 1 }, { key : 'option 2', value : 2 }, { key : 'option 3', value : 3 } ]; $(document).ready(function() { var $table = $('#example'); var dataTable = null; $table.on('mousedown', 'td .fa.fa-minus-square', function(e) { dataTable.row($(this).closest("tr")).remove().draw(); }); $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) { enableRowEdit($(this)); }); $table.on('mousedown', 'input', function(e) { e.stopPropagation(); }); $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) { updateRow($(this), true); // Pass save button to function. }); $table.on('mousedown', '.select-basic', function(e) { e.stopPropagation(); }); dataTable = $table.DataTable({ ajax: dataUrl, rowReorder: { dataSrc: 'order', selector: 'tr' }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'place' }, { data: 'delete' }] }); $table.css('border-bottom', 'none') .after($('<div>').addClass('addRow') .append($('<button>').attr('id', 'addRow').text('Add New Row'))); // Add row $('#addRow').click(function() { var $row = $("#new-row-template").find('tr').clone(); dataTable.row.add($row).draw(); // Toggle edit mode upon creation. enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square')); }); $('#btn-save').on('click', function() { updateRows(true); // Update all edited rows }); $('#btn-cancel').on('click', function() { updateRows(false); // Revert all edited rows }); function enableRowEdit($editButton) { $editButton.removeClass().addClass("fa fa-envelope-o"); var $row = $editButton.closest("tr").off("mousedown"); $row.find("td").not(':first').not(':last').each(function(i, el) { enableEditText($(this)) }); $row.find('td:first').each(function(i, el) { enableEditSelect($(this)) }); } function enableEditText($cell) { var txt = $cell.text(); $cell.empty().append($('<input>', { type : 'text', value : txt }).data('original-text', txt)); } function enableEditSelect($cell) { var txt = $cell.text(); $cell.empty().append($('<select>', { class : 'select-basic' }).append(options.map(function(option) { return $('<option>', { text : option.key, value : option.value }) })).data('original-value', txt)); } function updateRows(commit) { $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) { updateRow($(button), commit); }); } function updateRow($saveButton, commit) { $saveButton.removeClass().addClass('fa fa-pencil-square'); var $row = $saveButton.closest("tr"); $row.find('td').not(':first').not(':last').each(function(i, el) { var $input = $(this).find('input'); $(this).text(commit ? $input.val() : $input.data('original-text')); }); $row.find('td:first').each(function(i, el) { var $input = $(this).find('select'); $(this).text(commit ? $input.val() : $input.data('original-value')); }); } }); $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2'; table = $('#example2').DataTable({ ajax: url, order: [[ 0, "desc" ]], rowReorder: { dataSrc: 'place', selector: 'tr' }, columns: [ { data: 'name' }] }); }); }); 

  div.addRow { line-height: 45px; background-color: #fff; padding-left: 10px; border-bottom: 1px solid; border-top: 1px solid #e5e5e5; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script> <link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>order</th> <th>name</th> <th>country</th> <th>action</th> </tr> </thead> </table> <table id="new-row-template" style="display:none"> <tbody> <tr> <td>999</td> <!-- Use a large number or row might be inserted in the middle --> <td>__NAME__</td> <td>__COUNTRY__</td> <td> <i class="fa fa-pencil-square" aria-hidden="true"></i> <i class="fa fa-minus-square" aria-hidden="true"></i> </td> </tr> </tbody> </table> <br> <div class="pull-right"> <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button> </div> <br> <br> <h1> table 2 </h1><br> <br> <table id="example2" class="display" width="100%" cellspacing="0"> <thead> <tr> <th> name</th> </tr> </thead> </table> <br> <br> <h1> table 2 </h1><br> <br> <table id="example2" class="display" width="100%" cellspacing="0"> <thead> <tr> <th> name</th> </tr> </thead> </table> 

Answer 1

我已經在這里回答了這個問題： 如何將一列拖放到另一個

對您的代碼進行了一些更改（第二個表的全局MouseUp事件和MouseDown事件）：

var rowChache = [];

    function mouseUp(event) {
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

    if (ctrl.length > 0 && rowCache.length > 0) {
      var el = rowCache[0];
      var data = el.row.data();

      if (data.length > 0) {
        ctrl.val(data[0].name);
        el.row.remove().draw();
      }
    }

    rowCache = [];
    $('#example tr td:nth-child(2) input').removeClass('border-highlight');
  }

table.on('mousedown', 'tbody tr', function() {
var $row = $(this);

var r = table.rows(function(i, data) {
  return data.name == $row.children().first().text();
});

if (r[0].length > 0) {
  $row.parents('table').find('tr').removeClass('highlight');
  $row.addClass('highlight');
  $('#example tr td:nth-child(2) input').addClass('border-highlight');
}

  rowCache.push({
    row: r
  });
});

還要檢查鏈接： http : //jsfiddle.net/f7debwj2/47/

Answer 2

您甚至嘗試搜索嗎？

https://datatables.net/forums/discussion/30197/add-remove-table-rows-on-drag-and-drop-between-two-datatables

在兩個數據表之間移動行

https://gist.github.com/davemo/706167

在兩個表之間拖動n

在兩個數據表之間拖放

最重要的花絮來自數據表的創建者：

這不是DataTables的功能，但是，使用API​​完全有可能。 具體來說，我建議使用row（）。remove（）和row.add（）刪除並添加所需的行。 但是，拖放代碼將在DataTables外部。

您將使用https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API或在JS中執行某些操作，和/或將缺少的功能寫入API，但是鑒於上述鏈接，您可以將會看到人們如何解決您所描述的相同問題。 代替行，您將要處理列，並且我敢肯定，可以全部修改它們以完全執行所需的操作。

Answer 3

這看起來類似於： 如何將一列拖放到另一列中

我對以上帖子發表了評論。 請參閱是否要采用這種方法。