Jquery - Datable拖放更改bg后放一个新名称 [英] Jquery - Datatable drag and drop changing bg after drop a new name

问题描述

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

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

我想要做的是：

从表中删除（或更新）名称后在表1中的列中，该 td 的bg应更改名称更新的颜色。

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.

更新名称后，没有任何事情只会从列名中从 td 中删除​​其他bg。

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

当< td> 更新为淡入效果时，我想应用另一个bg颜色，显示 td 已更新。

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

当我将名称放在那里时，还可以使下面的div显示成功消息。

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>

我希望我解释得很好

以下是一个工作示例：
http://jsfiddle.net/L3Lhw7jk/3/

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

  });

});

推荐答案

如果我把所有内容都正确的话，你只需要写用于在MouseUp事件中更改颜色的代码。如下所示：

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

对于这种动画，您还必须添加一个jQuery.ui库。对于消息，你应该使它在默认情况下看不见（ style =display：none），同一个事件函数的末尾应用如下： code> $（'＃successMsg'）。fadeIn（2000）.fadeOut（4000）;

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

： http://jsfiddle.net/jahn08/L3Lhw7jk/9/

这篇关于Jquery - Datable拖放更改bg后放一个新名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！