Отправка формы в стиле G-mail для табличных данных

У меня есть строки таблицы данных в html, заполняемые из приложения CGI. Я хочу, чтобы рядом с каждой строкой был флажок, чтобы я мог удалить несколько строк, как в Gmail.

Я выяснил базовую текстовую форму и смог отправить ее в программу CGI для удаления строки, но я не хочу, чтобы мне приходилось вводить имя строки для удаления одного файла за раз.

Как выглядит код с обеих сторон (HTML-браузер и приложение C-CGI) для форм, когда вы можете выбрать несколько удалений с помощью флажков? Есть где-нибудь пример? (Я ограничен JS и HTML, но я думаю, что JS в любом случае предназначен для проверки, сейчас это не нужно. Кодирование на C на стороне приложения CGI.)

Спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
346
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Взгляните на javascript в стиле "AJAX". Когда вы делаете запрос AJAX на сервер, передайте все удаления. Сторона сервера должна быть закодирована так, чтобы принимать несколько удалений в одном запросе.

Ответ принят как подходящий

Что ж, вы можете сделать это несколькими способами:

1) Все элементы должны быть в одной форме. Назовите каждый флажок одинаково, но присвойте каждому флажку значение, которое отличает запись / идентификатор / файл, который он представляет. Когда браузер, если он соответствует требованиям, отправляет форму, приложение CGI должно иметь возможность видеть параметры HTTP как часть отправки POST или GET. Многие приложения CGI, такие как PHP, объединяют одноименные параметры в массив. Вы всегда можете самостоятельно просмотреть список параметров с помощью C.

// Client side html
<table>
<form>
<tr><td><input type = "checkbox" name = "id" value = "1"/></td><td>Row 1</td></tr>
<tr><td><input type = "checkbox" name = "id" value = "2"/></td><td>Row 2</td></tr>
<tr><td><input type = "checkbox" name = "id" value = "3"/></td><td>Row 3</td></tr>
<tr><td><input type = "checkbox" name = "id" value = "4"/></td><td>Row 4</td></tr>
</form>
</table>

// Server side CGI, using pseudo-code
String[] ids = request.getArrayOfParametersNamed("id");
if (!empty(ids)) {
 for(id in ids) {
   DatabaseControllerModelThingWhatever.deleteById(id);
 }

 // Actually if SQL based you should use a batch statement instead of 
 // one-at-a-time deletes like above
}

// Ok the rows are deleted, either print out the page, or better yet,
// send a redirect so that a user-refresh does not try and re-delete 
// already deleted stuff and also give the user a wierd "resubmit form" warning
// Done

2) Используя AJAX и, предпочтительно, некоторый тип библиотеки Javascript, когда пользователь нажимает кнопку «Удалить», выполните отправку на основе ajax, которая отправляет запрос на удаление проверенных записей. Одновременно используйте Javascript для удаления строк из таблицы HTML. Это означает, что страница пользователя никогда полностью не обновляется, ну, вроде как.

 // Client side HTML is same as before, only this time there is a DELETE button with
 // an onclick handler. Also, add a "class" or "id" to each "tr" so we can find it 
 // in the HTML table

 // Pseudo-javascript because I am lazy
 function onDeleteButtonClick() {

  // Get our ids
  var idElements = document.getElementsById("id");

  // Submit an async AJAX request (e.g. use Jquery and send ids as URL params)
  ajaxedDeleteSubmission(idElements);

  // Delete all the rows that should not be there
  for(i = 0; i < tablex.rows.length; i++) {
   // Grab the value of the "id" attribute of each table row (<tr id = "?">...</tr>)
   id = tablex.rows[id].id;
   if (id in ids) {
    // Remove the row, forget how because now I just use Jquery.
    tablex.deleteRow(i);
   }
  }
 }

В примере с AJAX может быть предпочтительнее отложить подтверждение от сервера (иметь обработчик для ответа сервера), что строки были удалены на сервере перед обновлением графического интерфейса.

Sean 10.01.2009 05:10

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