Soumission de formulaire de style G-mail sur des données de table

Question

J'ai des lignes de table de données en html en cours de remplissage à partir d'une application CGI. Je souhaite que chaque ligne contienne une case à cocher afin de pouvoir supprimer plusieurs lignes, comme dans Gmail.

J'ai trouvé le formulaire texte de base et j'ai pu l'envoyer au programme CGI pour supprimer la ligne, mais je ne veux pas avoir à taper le nom de la ligne pour supprimer un seul fichier à la fois. A quoi ressemble le code des deux côtés (navigateur html et application C-CGI) pour les formulaires lorsque vous pouvez sélectionner plusieurs suppressions via les cases à cocher? Y a-t-il un exemple quelque part? (Je suis limité à JS et HTML mais je pense que JS est pour la validation de toute façon, je n'ai pas besoin de ça pour le moment.) C codage côté application CGI.)

Merci.

Answer 1

Eh bien, vous pouvez le faire de plusieurs façons:

1) ont tous les éléments de la même forme. Nommez chaque case à cocher de la même manière, mais attribuez à chaque case une valeur qui distingue l'enregistrement/id/fichier qu'elle représente. Lorsque le navigateur, s'il est conforme, soumet le formulaire, l'application CGI doit être capable de voir les paramètres HTTP dans le cadre de la soumission POST ou GET. Beaucoup d'applications CGI comme PHP combinent des paramètres de même nom dans un tableau. Vous pouvez aussi parcourir la liste des paramètres avec C aussi.

// 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) Utilisation d'AJAX et un certain type de préférence bibliothèque Javascript, lorsque l'utilisateur clique supprimer, effectuer une présentation sur ajax qui présente une demande de supprimer les enregistrements vérifiés. Simultanément, utilisez JavaScript pour supprimer les lignes de la table HTML. Cela signifie que la page de l'utilisateur n'est jamais complètement actualisée, eh bien, en quelque sorte.

// 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

Regardez dans le style "AJAX" javascript. Lorsque vous effectuez la requête AJAX sur le serveur, transmettez toutes les suppressions. Le côté serveur doit être codé pour accepter plusieurs suppressions dans une seule requête.