Как изменить положение строки таблицы после отмены кнопки подтверждения в javascript - PullRequest
0 голосов
/ 25 февраля 2020

Я хочу вернуть позицию после перетаскивания.

В моей системе есть таблица. Его ряды можно перетаскивать и менять положение. В соответствии с порядком перетаскивания также могут быть изменены. Но перед изменением появляется сообщение с подтверждением заказа, и если мы его одобрим, измените позицию и измените номер заказа. Это было закончено хорошо.

Если мы отменим подтверждение, перетаскивание должно быть отменено. Но эта часть не работает хорошо. Это проблема, которая у меня есть. Я упомянул пробный код ниже. Где я должен измениться, чтобы это исправить?

Пробовал Javascript код:

var fixHelperModified = function(e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
  });
  return $helper;
}
  updateIndex = function(e, ui) {
    if(window.confirm("Do you really want to update the order?")){
      $('td.index', ui.item.parent()).each(function (i) {
          $(this).html(i + 1);
      });
    }else{
      $("#table tbody").draggable({
        revert: "invalid";
    });
    }
  };


  $("#table tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
  }).disableSelection();

1 Ответ

0 голосов
/ 25 февраля 2020
$(this).sortable('cancel');

//$('table tbody').sortable();

var fixHelperModified = function(e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
  });
  return $helper;
}
var updateIndex = function(e, ui) {
  if(window.confirm("Do you really want to update the order?")){
    $('td.index', ui.item.parent()).each(function (i) {
        $(this).html(i + 1);
    });
  }else{
    
    $(this).sortable('cancel');
  }
};


$("table tbody").sortable({
  helper: fixHelperModified,
  stop: updateIndex,
  revert: '100'
}).disableSelection();
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<table>
<thead>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1- Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2- Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>3- Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>4- Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>5- Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>6- Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody>
</table>
 
</body>
</html>

дубликаты

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...