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

Question

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

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

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

Спасибо.

Answer 1

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

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);
   }
  }
 }

Answer 2

Изучите JavaScript в стиле «AJAX». Когда вы делаете запрос AJAX на сервер, передайте все удаления. Серверная сторона должна быть закодирована для принятия нескольких удалений в одном запросе.