Как создать кнопку массового удаления с помощью Javascript и AJAX

#javascript #function #crud #bulk-delete

#javascript #функция #crud #массовое удаление

Вопрос:

я разрабатываю новый веб-сайт и хочу найти способ добавить опцию массового удаления.

Внутри веб-сайта у меня есть таблица, в которой отображается информация о задачах расписания, которые создает пользователь.

 The table that handle this information have these columns...
| TABLE 'schedule_task' | id, name, starting_date, status
  

Я представляю все запланированные задачи в таблице, используя AJAX. У меня также есть кнопка удаления / редактирования, которая отправляет событие на серверную часть.

Я хочу добавить кнопку в эту таблицу, чтобы пользователь мог удалять несколько (или все / проверять-все) задач за один раз.

Пока я создаю кнопку «Массовое удаление»…

    <button type="button" id="bulk_delete" class="btn-xs bulk_delete_button">
   Bulk Delete</button>
  

которая отправляет событие при нажатии на нее…

  $(document).on('click', '.bulk_delete_button', function(event){
    console.log('Bulk Button clicked');                        });
  

Кнопка успешно отправляет событие на консоль, и я вижу сообщение при ее нажатии…

Кнопка массового удаления сообщения в журнале консоли

Теперь я добавляю флажки слева от таблицы, чтобы пользователь мог удалять несколько задач одновременно…

Следующий шаг, который я сделал, — создать функцию, которая (я хочу) будет выбирать и отправлять событию (при нажатии кнопки массового удаления) идентификаторы задач, которые пользователь хочет удалить…

Моя попытка для этого пока такова…

  function checkBox_Picks(sourse) {
    check_choises=document.getElementsByName('value');
    for(var i in check_choises)
        check_choises[i].checked=source.checked;

     return check_choises                                  }
  

Я пытаюсь передать ‘check_choises’, которую возвращает эта функция, другой функции («результаты функции() {….} но я не смог передать возврат из функции другой, потому что функция A (источник) —> функция B () )

есть ли у вас какие-либо идеи, как я могу передать выбор пользователя (идентификатор задач) кнопке массового удаления?

Ответ №1:

Сначала вам, вероятно, нужно изменить checkBox_Picks, чтобы фактически определить, какие флажки установлены (в данный момент вы устанавливаете их состояние, присваивая им значение : check_choises[i].checked=source.checked; ):

 function checkBox_Picks() {
  var result = []; //This is your array in which the values if a box is checked or not will be written to, ordered as the boxes themselves in document
  check_choices=document.getElementsByName('value');
  for(var i in check_choices)
    result.push(check_choices[i].checked); //Add the 'checked' value to the result

  return resu<                                 
}
  

Теперь вы могли бы просто вызвать функцию при запуске вашего события и сохранить результат в переменной. После этого вы могли бы сделать другие вещи с этим результатом или передать его другой функции (например, вашей ‘result’-функции). Это может выглядеть следующим образом:

 $(document).on('click', '.bulk_delete_button', function(event){
   console.log('Bulk Button clicked'); 
   var choices = checkBox_Picks(); //Determine the checked boxes
   console.log(choices); //Log the choices
   //Your code here
   //Possibly do something like 'result(choices)'
});
  

Комментарии:

1. Спасибо за совет… Я попробую это