0

Всем доброго времени суток. Есть таблица, связанная с SQL. При нажатии на кнопку удаления, которая есть в каждой строке, необходимо скрывать строку и на её месте создавать кнопку с обратным отсчётом и возможностью отмены действия(возвращать строку на место). В случае если кнопка отмены не была нажата, должен отправляться ajax-запрос на удаление этой записи из бд. Перепробовал множество вариантов и пока остановился на этом, но не совсем то, что нужно.

.on('click', '.-deleteItem', function (e) {
        e.preventDefault();
        let $tr = $(this).closest('tr');
        let id = $tr.data('id');
        let tr = document.getElementById('tr' + id);
        let but = document.getElementById('but' + id);

        console.log(but);
        $tr.remove();
        let rows = $('.-itemsTable > tbody > tr');
        rows.each(function (i) {
            $(this).find('.drag-num').text(i + 1);

        });
        let is = document.getElementById('button');
        is.style = 'cursor: pointer;;display: inline-block';

        let timeleft = 29;
        let sleft = 3;
        let downloadTimer = setInterval(function(){
            if(timeleft <= 0){
                clearInterval(downloadTimer);

            } else {
                document.getElementById("countdown").innerHTML ="(" + Math.round(sleft) + " c)";
            }
            sleft -= 0.1;
            timeleft -= 1;
        }, 100);

        let data = {token: get_token(), id: $tr.data('id')};
        let min = 3000;
        let timer = setTimeout(time_end, min);

        function time_end()
        {
            clearTimeout(timer);
            let ist = document.getElementById('button').className.indexOf("press");
            if ( ist === -1 )
            {
                is.style = 'display:none';
                console.log('Deleted');
                $.ajax({
                    url: 'orders/deleteItem/',
                    type: 'post',
                    data: data,
                    dataType: 'json',
                }).done(function () {$tr.remove();
                    updateTotalSum();
                }).fail(function () {
                    alert('Возникла ошибка');
                });
            }
            else
            {
                is.style = 'display:none';
                console.log('Returned');
                let profile = document.getElementById('profile');
                console.log(tr);
                profile.appendChild(tr);
                rows.each(function (i) {
                    $(this).find('.drag-num').text(i + 1);

                });
            }
        }


    })
    ;
2
  • что-то много кода для такого функционала
    – teran
    7 июл 2022 в 6:20
  • Ну покажи тогда, пожалуйста, как лучше?
    – togzi
    7 июл 2022 в 6:25

2 ответа 2

1

что-то примерно такое должно быть

$("table").on('click', ".remove", function(){    
   let row = $(this).closest('tr');
   $(row).addClass('remove-await');
   let h = setTimeout(function(){
              let id = $(row).data('id');
              console.log(`remove: ${id}`);
              //$.post("url-remove", {id: id}, function(){
                    $(row).remove();
              //});
      }, 10000);
      
   let n = 10;   
   let ticks = setInterval(function(){        
        $(row).find(".cancel").text(`cancel ${--n}`);
      }, 1000);
      
   $(row).data({h: h, ticks: ticks});
});

$("table").on('click', '.cancel', function(){
   let row = $(this).closest('tr');
   clearTimeout($(row).data('h'));
   clearInterval($(row).data('ticks'));
   $(row).removeClass('remove-await');
});
.remove-wrapper {
   display: none;
   text-align: right;
}
tr.remove-await .remove-wrapper {
  display: table-cell;
}

tr.remove-await td:not(.remove-wrapper) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr data-id="1">
      <td>1</td>
      <td>test1</td>
      <td><button class="remove">remove</button></td>
      <td colspan="3"  class="remove-wrapper"><button class="cancel">cancel</button></td>
   </tr>   
   <tr data-id="2">
      <td>2</td>
      <td>test2</td>
      <td><button class="remove">remove</button></td>
      <td colspan="3" class="remove-wrapper"><button class="cancel">cancel</button></td>
   </tr>
</table>

1
  • Спасибо огромное!!!
    – togzi
    7 июл 2022 в 6:49
1

Накидал такой вариант, описание в коде

const time = 10; // Время за которое можно отменить удаление (в секундах)
const confirm = document.querySelector('.del-confirm'); // Блок отмены удаления
const progress = confirm.querySelector('.del-confirm__progress-bg'); // Прогресс бар
let parent, timer, // Переменные для хранения удаляемого блока и таймера
    isConfirm = false; // некая "защита", чтобы нельзя было нажимать кнопку "del", если блок подтверждения отображается.

document.querySelector('ul').addEventListener('click', e => { // Делегирование события
    const del = e.target.closest('.del'); // Если нажата кнопка `.del`
    if(del && !isConfirm) { // проверяем ещё и наличие "защита"
    isConfirm = true; // включаем "защиту"
        let i = time; // текущий шаг, начинаем от `time`
        parent = del.closest('li'); // Получаем родительский блок кнопки "удалить"
    
        parent.style.display = 'none'; // сначала прячем удаляемый блок
        confirm.style.display = 'inline-block'; // И показываем подтверждение удаления
        
        timer = setInterval(() => { // Запускаем таймер
            if(i > 0) { // Пока есть возможность отменить удаление
                i--; // Уменьшаем время
        progress.style.width = i / time * 100+'%'; // анимации прогресс бара
            } else { // когда время выйдер
                clearInterval(timer); // очищаем таймер
                parent.remove(); // Удаляем из HTML блок
        parent = ''; // Очищаем переменную (чтобы в ней не хранился блок)
                confirm.style.display = ''; // Скрываем подтверждение
        progress.style.width = '';
        isConfirm = false; // отключаем "защиту"
                // полное удаление
            }
        }, 1000);
    }
});

// Отмена удаления по кнопке
confirm.querySelector('.del-confirm--cancel').addEventListener('click', e => { // вешаем слушатель на клик
    clearInterval(timer); // очищаем таймер
    parent.style.display = confirm.style.display = ''; // возвращаем исходные состояния блоков
    parent = ''; // очистим переменную
  isConfirm = false; // отключаем "защиту"
  progress.style.width = '';
});
ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

ul li span {
  margin-right: 10px;
}

ul li .del {
  color: #f00;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

.del-confirm {
  display: none;
  max-width: 100%;
  border-radius: 5px 5px 0 0;
  background-color: #ccc;
  text-align: center;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.del-confirm__progress {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background-color: rgba(0,0,0,0.1);
  position: relative;
  margin-bottom: 0.5em;
}

.del-confirm__progress-bg {
  content: '';
  display: block;
  width: 100%;
  background-color: #ffa500;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 1s linear;
}

.del-confirm__text {
  display: block;
  padding: 0 2em;
  box-sizing: border-box;
  margin-bottom: 0.5em;
}

.del-confirm__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 2em;
  margin-bottom: 0.5em;
  box-sizing: border-box;
}

.del-confirm__btn {
  display: inline-block;
  color: rgba(0,0,0,0.75);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
<ul>
  <li><span>item 3</span>
    <div class="del">del</div>
  </li>
  <li><span>item 2</span>
    <div class="del">del</div>
  </li>
  <li><span>item 1</span>
    <div class="del">del</div>
  </li>
  <li><span>item 0</span>
    <div class="del">del</div>
  </li>
</ul>

<div class="del-confirm">
  <div class="del-confirm__progress">
    <div class="del-confirm__progress-bg"></div>
  </div>
  <div class="del-confirm__text">Отменить удаление?</div>
  <div class="del-confirm__btns">
    <div class="del-confirm__btn del-confirm--cancel">Отменить</div>
  </div>
</div>

2
  • а что у вас произойдет при нажатии кнопок удаления в двух разных строках?
    – teran
    7 июл 2022 в 18:47
  • @teran, спасибо что подметили, поправил
    – De.Minov
    7 июл 2022 в 19:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.