GetUIKit3 - Как удалить / добавить элемент в сортируемый?

Два вопроса: я хотел бы добавить ссылку "удалить" в сортируемую таблицу GetUIKit3, которая удалит элемент из сортируемой таблицы и вызовет серверный сценарий для удаления элемента на сервере. Кроме того, как мне добавить элемент в конец существующей сортируемой GetUIKit3 с использованием JavaScript?

1 ответ

Решение

УДАЛЕНИЕ

просто добавьте какую-нибудь кнопку внутри вашего сортируемого элемента и привяжите к нему простой jquery для события click, такой простой, как:

<ul uk-sortable>
<li data-db-id="nn"><img/><a class="del-button">Remove</a></li>
</ul>

$('.del-button').on('click', function(e){
e.preventDefault();
let $li = $(this).parent('li');
let myDbId = $li.data('db-id');
$li.remove();
$.ajax({
  method: "POST",
  url: "some.php",
  data: { imgId: myDbId }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
})

Если вы хотите использовать событие UIkit - есть также способ программно перехватить событие удаления компонента, но я не знаю, будет ли этот метод возвращать удаленный элемент из аргументов:

UIkit.util.on('ul[data-uk-sortable]', 'remove', function (el) {
    console.log(el); //check if there's something
    // do something, ajax probably
});

ДОБАВЛЕНИЕ

$('ul[uk-sortable]').append('<li data-db-id="nn"><img/><a class="del-button">Remove</a></li>')

Конечно, вы должны предоставить данные, которые должны быть добавлены в контейнер. Возможно, вы могли бы объединить событие dropzone после загрузки (должно быть что-то подобное), а затем добавить результат из этой функции.

Другие вопросы по тегам