Jquery - Datatable drag and drop changing bg after drop a new name

问题

I am using: jquery.dataTables.js from: https://datatables.net

What I am trying to do is:

After dropped (or update) the name from table 2 in in the column on table 1, the bg of this td should change color where the name was updated.

Right after the update of the name, nothing happens just the other bg is removed from td from the column name.

I would like apply another bg color when the <td> is updated like a fade-in effect showing the td has been updated.

Also make the div below appear with a success message when I drop the name there.

<div class="alert alert-success" >
  <strong>Success!</strong> Members Saved.
</div>

I hope I explained it well

Here is a working sample: http://jsfiddle.net/L3Lhw7jk/3/

CSS:

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;
}

td.name-highlight {
  background-color: #73C6B6 !important;
}

.border-highlight {
  border-color: #73C6B6 !important;
  border-width: 3px;
}

HTML:

<h1>
 table 1
</h1>

<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>

jQuery:

$(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 names = $('#example tr td:nth-child(2)');
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('.name-highlight,input.border-highlight');

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

      if (data.length > 0) {
        if (ctrl.is('input'))
          ctrl.val(data[0].name);
        else
          ctrl.text(data[0].name);

        el.row.remove().draw();

        names.removeClass('name-highlight');
        names.find('input').removeClass('border-highlight');
      }
    }

    rowCache = [];
  }

  $(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))
      });

      $row.find('.name-highlight input').addClass('border-highlight');
      $row.find('.name-highlight').removeClass('name-highlight');
    }

    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'));
      });

      if ($('#example2 .highlight').length > 0)
        $row.find('td:nth-child(2)').addClass('name-highlight');
    }
  });

  $(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');

        var names = $('#example tr td:nth-child(2)');
        names.filter(':not(:has(input))').addClass('name-highlight');
        names.find('input').addClass('border-highlight');
      }

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

  });

});

回答1:

If I got everything correctly, you just need to write code for changing colours right in your MouseUp event. Something like:

var $td = ctrl.is('input') ? ctrl.parent(): ctrl;
$td.animate({ 'background-color': "#BC8F8F" }, 3000);

For this kind of animation you will also have to add a jQuery.ui library. As for the message, you ought to make it invisible in default (style="display: none") and at the end of the same event function apply something like this: $('#successMsg').fadeIn(2000).fadeOut(4000);

Check the respective example here: http://jsfiddle.net/jahn08/L3Lhw7jk/9/

来源：https://stackoverflow.com/questions/42653929/jquery-datatable-drag-and-drop-changing-bg-after-drop-a-new-name