Bonjour.
Je rencontre un probléme pour gérer les données d'un array.
Je m'explique : j'ai un tableau
et je voudrais que lorsque je clic sur une ligne du tableau, la valeur de la 1ere cellule de la ligne soit ajoutée ou enlevée d'un array selon si la ligne est sélectionnée ou deselectionnée.
L'ajout dans l'array fonctionne http://www.grafikart.fr/forum/topics/18078 (merci betaWeb) mais je souhaite aussi implémenter la suppression dans l'array car le tableau est sur plusieurs pages (et je souhaite pouvoir revenir sur la page précédente pour deselectionner des cellules)
https://jsfiddle.net/Flavors/nuzo8gn2/21/
//Fonction JS pour selectionner les lignes
var $marques = $('.marques');//déclaration en variable globale
var liste_marque = [];//déclaration en variable globale
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
$dataTr = $(this).data('tr');//le data-tr des ligne vaut "ligne_x"
$trList = $("tr[data-tr=" + $dataTr + "]"); //On liste tous les TR qui on le même attribut ("ligne_tr")
if($(this).hasClass('selected'))//Si la ligne cliqué à la classe "selected"
{
Suppr_Liste(); //fonction de suppression dans la liste
$trList.removeClass('selected'); //On enleve la classe "selected"
}
else
{
$trList.addClass('selected'); //On ajoute la classe "selected"
Ajout_Liste()//fonction d'ajout dans la liste
}
liste_marque.length ? $marques.text(liste_marque.join(', ')) : $marques.text(''); //On affiche la liste
});
//Fonction JS pour Mettre à jour la liste des elements selectionnes
function Ajout_Liste()
{
$('.selected').each(function() //Pour chaque element ayant la classe "selected"
{
var id = $('.col_marque', this).html(); //on recupere la valeur de la 1ere cellule
var position = liste_marque.indexOf(id) //On prend sa position dans la liste
if(('undefined' != typeof(id)) && (position == -1)) //Si id existe et n'est pas présent dans la liste_marque
{
alert("Il n'existe pas dans la liste, on l'elenve");
liste_marque.push(id); // On l'ajoute à la liste
}
});
}
function Suppr_Liste()
{
$('.selected').each(function()//Pour chaque element ayant la classe "selected"
{
var id = $('.col_marque', this).html();//on recupere la valeur de la 1ere cellule
var position = liste_marque.indexOf(id)//On prend sa position dans la liste
if(position != -1)//Si il est déjà dans la liste
{
alert("Il existe dans la liste, on l'elenve");
liste_marque.splice(position,1); //On enleve l'element de la liste
}
});
}
Le probleme c'est que lors de la suppression je boucle sur tous les "selected" mais je n'arrive pas à voir comment n'en selectionner qu'un seul...
Si quelqu'un à une piste, ce serait gentil.
Merci
Salut,
Lorsque tu construits ton table html, ajoute un attribut "data-index" aux <tr>, de façon à ensuite pouvoir l'extraire lorsque la ligne est selected. De cette façon, tu aura l'index de l'élément dans ton array.
C'est une solution comme une autre. Sinon il faut récupérer la clé en fonction de la valeur selected avec la fonction array.indexOf(valeur).
Merci pour votre réponse.
Oui je comprends c'est vrai que c'est pratique, une fois qu'on a récupérer la valeur de l'index et faire mon traitement par rapport à ce dernier.
Je suis désolé, j'avais oublié d'éditer le post. A présent je passe par une pagination en PHP selon le tutoriel de ce site et pour garder ma selection d'une page à l'autre, je passe par de l'ajax pour ajouter ou enlever la selection d'un tableau de Session.
Je ne sais pas si c'est correct de faire comme cela, mais c'est trés pratique en tout cas.><
Merci encore pour votre réponse.