Question

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

我正在尝试将列从一个表拖放到另一个表。

修改基本上我想做的是：

能够将表2中的名称拖放到上表中名为名称的列中
拖放后，名称将从表2中消失。

案例2：如果我使用按钮添加新行 添加新行

我需要能够将表格2中的名称拖放到该列名称中。

所以基本上我想在不在行中的列中进行拖放。

我不想创建新行，只需将名称从1个表移到另一个表。

编辑2：

1-您可以将表＃2中的多个值拖放到表＃1吗？ 不，拖拽只能是1比1。用户单击编辑或添加新行后，可以进行拖放操作。所以我将能够将名称drom table 2替换为列名表1

2-如果不是，拖动的值应该替换它被删除的值吗？ 是

3-如果是，它应该如何运作？添加其他值为空的新行？不需要添加任何行，我们只需要替换列名称。

如何运作 所以点击编辑或添加新行后，我将能够将表2中的名称拖入列中表1。

如果可能的话，还会有更多的请求： 如果选择表2中的行，则该行应更改颜色，显示已选中。并且在表1中collenn name需要删除这个名称需要更改颜色来显示用户可以被删除。

在这里工作的样本： 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

我对您的代码进行了一些更改。请试一下，看看这个决议是否适合你：

$(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
    }
  ];

  var rowCache = [];

  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');
  }

  $(document).ready(function() {
    var $table = $('#example');
    var dataTable = null;

    $('body').mouseup(mouseUp);

    $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'
      }]
    });

    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
      });
    });

  });

});

div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

tr.highlight td {
  background-color: #D0ECE7 !important;
}

.border-highlight {
  border-color: #D0ECE7 !important;
  border-width: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>

<link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<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>

JSFiddle：http://jsfiddle.net/f7debwj2/47/

Answer 2

首先，为表2 td绑定click事件以获取非常简单的数据。然后我会在表1中编写如下的mouseup函数：

$('table-id-class').on('mouseup', 'td', function (e) {
    console.log(e.html());
    e.stopPropagation();
});

上述事件会为您提供td的准确位置，您可以随时更改TD的值。我确信数据表必须有一些方法来更改值，以便在数据中获取该值。祝你好运！

如何将列拖放到另一个

2 个答案: