Permettre l'édition d'un tableau php dynamique de texte

Question

J'ai un tableau html qui est généré par PHP et des données dans une base de données. Ce que je veux faire, c'est avoir un bouton dans la dernière cellule de chaque ligne qui dit "modifier" et lorsque vous cliquez sur ce bouton, le texte dans les autres cellules devient des zones de texte ou d'autres types de champs de saisie afin que vous puissiez les modifier et ensuite appuyer sur "soumettre", ce qui enverrait ce formulaire pour être mis à jour dans la base de données. Le code que j'ai actuellement pour générer le tableau est le suivant :

<table style="width:100%; " class = "table table-striped table-bordered table-hover">
  <tr>
     <th>Name</th>
     <th>Status</th>
     <th>Description</th>
     <?php 
        if($_SESSION['editGroup'] != 0){
           echo "<th>Edit</th>";
        }
     ?>
  </tr>
 <?php
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $checkQuery = "SELECT userGiven, userStatus, userDesc FROM user_Status WHERE organization = 'myOrg' ORDER BY userGiven ASC";
    $prepared = $dbh->prepare($checkQuery);
    $prepared->execute();
    $data = $prepared->fetchAll(PDO::FETCH_ASSOC);
    foreach($data as $row){
      echo "<tr>";
      if($_SESSION['editGroup'] != 0){
      echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='10%'>" . $row['userStatus'] . "</td><td width='70%'>" . $row['userDesc'] . "</td><td width='10%'><button type='button' class='btn btn-info'>Edit</button></td>";
      }else{
         echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='15%'>" . $row['userStatus'] . "</td><td width='75%'>" . $row['userDesc'] . "</td>";
      }
      echo "</tr>";             
    }
 ?>
</table>

Ce que j'essaie de faire est de changer la cellule avec userStatus en un champ déroulant avec la valeur actuelle comme valeur de départ et l'autre valeur in/out comme autre valeur à sélectionner.

Je veux également transformer le userDesc en textarea et je pense savoir comment faire tout cela mais je rencontre un problème conceptuel lorsque j'essaie de l'appliquer au tableau dynamique.

Ce que je pensais, c'est que je pourrais utiliser jquery/javascript pour obtenir le innerhtml de la variable span qui pourrait entourer ces deux cellules et ensuite changer le html des différents champs de saisie contenant le texte actuel permettant à l'utilisateur qui les édite de changer ces valeurs.

Mais comment faire pour ce genre de problème ? J'aurais besoin d'événements onClick pour tous les boutons et je ne saurais pas combien de boutons il y aurait, c'est basé sur le nombre de lignes dans le tableau.

Cela entraînerait des centaines de lignes de code redondantes. Je suppose donc qu'il doit y avoir un meilleur moyen. Quelqu'un connaît-il un moyen d'accomplir cela ? J'ai trouvé ceci : http://stackoverflow.com/questions/16202723/how-to-edit-data-onclick ce qui est proche de ce que je veux, mais cela semble être des valeurs statiques alors que je veux pouvoir le faire pour n'importe quelle ligne du tableau.

Answer 1

Dans votre for vous voudrez mettre quelque chose d'identifiable dans la section <tr> y <td> éléments. Personnellement, j'opterais pour un attribut de données. Par exemple :

Code de la rangée Echo

foreach($data as $row){
  echo "<tr data-row='{$row[id]}'>";
  if($_SESSION['editGroup'] != 0){
     echo "<td width='20%' data-column='name'>" . $row['userGiven'] . "</td><td width='10%' data-column='status'>" . $row['userStatus'] . "</td><td width='70%' data-column='description'>" . $row['userDesc'] . "</td><td width='10%'><button type='button' class='btn btn-info'>Edit</button></td>";
  }else{
     echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='15%'>" . $row['userStatus'] . "</td><td width='75%'>" . $row['userDesc'] . "</td>";
  }
  echo "</tr>";             
}

Donc, comme vous pouvez le voir, j'ai ajouté un data-row de l'attribut <tr> qui devrait obtenir la valeur de l'ID de l'enregistrement de la base de données. Changez-le si nécessaire - j'ai supposé qu'il serait nommé 'id'. De plus, j'ai ajouté l'élément data-column à l'attribut <td> qui devrait identifier chaque colonne pour nous. C'est toute la modification nécessaire dans le PHP.

Maintenant, voici à quoi ressemble le JQuery pour le bouton d'édition :

Écouteur d'événements de première ligne : 1ère partie

$( function(){

    $(document).on("click", ".btn-info", function(){

        var parent = $(this).closest("tr");
        var id = $(parent).attr("data-row");
        var name = $(parent).children("[data-column='name']");
        var status = $(parent).children("[data-column='status']");
        var desc = $(parent).children("[data-column='description']");
        var nameTxt = $(name).html();
        var statusTxt = $(status).html();
        var descTxt = $(desc).html();

        $(name).html("<input name='name' data-dc='name' value='" + nameTxt + "'>");
        $(status).html("<input name='status' data-dc='status' value='" + statusTxt + "'>");
        $(desc).html("<textarea name='desc' data-dc='description'>" + descTxt + "</textarea>");

        $(this).replaceWith("<button class='btn-info-save'>Save</button>");
    });

}

Enfin, nous devons définir ce qui se passe lorsqu'on appuie sur le bouton "Enregistrer" (l'exemple ci-dessus transforme le bouton "Modifier" en bouton "Enregistrer"). Cela peut être n'importe quoi, mais nous supposons que ce sera un appel AJAX :

Écouteur d'événements de première ligne : Partie 2

$( function(){

    $(document).on("click", ".btn-info-save", function(){

        var parent = $(this).closest("tr");
        var id = $(parent).attr("data-row");
        var data = {id: id};

        $("[data-dc]").each( function(){
            var col = $(this).attr("data-dc");
            var val = $(this).val();

            data[col] = val;
        });

        $.ajax({
            url: "/dynamic-edit/edit.php", // Change this to your PHP update script!
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function(ret){
                //Do Something
                console.log(ret.response);
               },
            error: function(ret){
                console.log(ret.response);
               }
        });

    });

}

Maintenant, dans votre script PHP qui gère la requête AJAX :

Code PHP pour "edit.php

$name = $_POST['data_name'];
$status = $_POST['data_status'];
$description = $_POST['data_description'];

// Do whatever with the data

// Output JSON - get the response in JS with ret.response
// either inside the success or error portion of the AJAX
echo json_encode( ["response"=>"Row edited successfully."] );

Il s'agit d'un exemple très simple, mais il permet de faire passer le message. Assurez-vous de changer l'url AJAX de "/dynamic-edit/edit.php" à l'endroit où vous ferez votre script PHP qui fera réellement les mises à jour après soumission.

Il est probable que vous souhaitiez effectuer un nettoyage après une modification réussie ; par exemple, en transformant les zones de texte en simple texte dans un fichier de type <td> . Veuillez également noter que je viens de les transformer en zones de texte. Je sais que vous avez dit dans votre message que vous vouliez que le statut soit une liste déroulante et la description un textarea, mais cet exemple devrait être assez facile à modifier. Je ne sais pas ce que les valeurs de la liste déroulante devraient être, donc vous devrez faire cette partie.

Notas

Je suis allé avec $(document).on("click" ... au lieu de $(".btn-info").on("click" ... parce qu'à chaque fois que vous avez affaire à du contenu dynamique, vous voulez toujours que l'écouteur d'événements soit sur le document, et non sur l'élément. Pourquoi ? Parce que si vous cliquez sur le bouton "Modifier", qu'il disparaît et qu'un bouton "Enregistrer" apparaît, vous perdez définitivement cet écouteur d'événements. Si vous ajoutez à nouveau le bouton "Modifier" (par exemple, après une sauvegarde réussie), il faudra ajouter à nouveau l'écouteur d'événements à ce bouton. Si vous décidez d'attacher l'écouteur d'événements à la balise document Cependant, vous pouvez enlever/ajoutez tout ce que vous voulez et cela fonctionnera toujours.

Answer 2

Vous pouvez ajouter l'attribut 'data' à chaque bouton avec l'identifiant de l'utilisateur que vous voulez mettre à jour. Par exemple :

<button data-iduser='<?= $use["id"] ?>' class='btn btn-info'>Edit</button>

$("btn btn-info").click( function() {
   var idUser = $(this).attr("data-iduser");
   // some ajax if you want with that iD
});