Arborescences Dynamique (php) avec Checkbox et logique de coche/décoche en javascript
Bonjour,
Donc j'ai développer avec php/mysql une arborescences dynamique affichant l'activité, la famille, la sous-famille et le différents produits associer.
j'ai mit des checkbox pour activé ou non l'affichage du produit coté front-office, ce que je voudrais c'est une logique de coche/décoche de mes checkbox en fonction de la famille sous famille etc... que je veut faire en Javascript j'ai donc crée un tableau sous js pour stocker dans chaque ligne du tableau les information d'activité famille sousfamille et produit mais je n'arrive pas à récupéré ces données. j'ai mit mon code sources ci-dessous,
si vous pouviez m'aider je vous remercie d'avance je suis bien bloqué la :(
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
| $activite = new Activite($db);
$famille = new Famille($db);
$sousfamille = new SousFamille($db);
$produit = new Produit($db);
$id_catalogue = $_SESSION['crud_catalogue'];
$resactivite = $activite->getListe($id_catalogue);
/*Script Arborescences*/
echo '<script type="text/javascript" src="./javascripts/jquery.js"></script>
<link rel="stylesheet" href="./javascripts/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="./javascripts/jquery.treeview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#activite").treeview({
unique: true
});
});
</script>
<script type="text/javascript">
var Itree[][]; //déclare le tableau en variable globale
function CheckAll(lignetab){//fonction appeler au click de la checkbox (le paramètre est la ligne du produit cliquer)
document.write(Itree[lignetab][0]);//affiche la première entrée de mon tableau en fonction de la ligne
/*Je veut faire une logique de coche/décoche des checkbox ici mais je n arrive meme pas a afficher une ligne du tableau au click de la checkbox ça fait rien*/
/*si je met document.write("test"); la au click ma fonction ce lance*/
}
</script>';
/*Début de mon formulaire*/
echo '<form id="activ" method="post" action="modules.php?crud_module=produit2&crud_action=arboactivdesac"><div id="treeActivites" class="demo">';
echo '<ul id="activite" class="filetree">';
$lignetab=0;//variable representative de la ligne du tableau
foreach ($resactivite as $data) {//pour chaque activité
if($produit->getActiviteIfPrdExist($db, $data['id'])!=NULL) {//si il y a au moin un produit dans l'activité
echo '<li class="closed"><input id="'.$data['id'].'" value="'.$data['id'].'" name="activite" type="checkbox" onClick="CheckAll('.$lignetab.')"><span class="folder">'.$data['nom'].'</span>';//j'affiche mon activité
$resfamille = $famille->getListeParActivite($data['id']);//récupère les familles en fonctions de l'activité
echo '<ul class="famille">';
foreach ($resfamille as $data2) {//pour chaque famille
if($produit->getFamilleIfPrdExist($db, $data2['id'])!=NULL) {////si il y a au moin un produit dans la famille
echo '<li class="closed"><input id="'.$data['id'].'-'.$data2['id'].'" value="'.$data2['id'].'" name="famille" type="checkbox" onClick="CheckAll('.$lignetab.')"><span class="folder">'.$data2['nom'].'</span>';//j'affiche ma famille
$resSsfamille = $sousfamille->getByParentId($data2['id']);//récupère les sous-familles en fonction de la famille
echo '<ul class="sousfamille">';
foreach ($resSsfamille as $data3) {//pour chaque sous-famille
if($produit->getSsFamilleIfPrdExist($db, $data3['id'])!=NULL) {//si il y a au moin un produit dans la sous-famille
echo '<li class="closed"><input id="'.$data['id'].'-'.$data2['id'].'-'.$data3['id'].'" value="'.$data3['id'].'" name="sousfamille" type="checkbox" onClick="CheckAll('.$lignetab.')"><span class="folder">'.$data3['nom'].'</span>';//j'affiche ma sous-famille
$resProduit = $produit->getListeParSousFamille($data3[id]);//récupère les produits en fonctions de la sous-famille
echo '<ul class="produit">';
foreach ($resProduit as $data4) {//pour chaque produit
echo '<li class="closed"><input id="'.$data['id'].'-'.$data2['id'].'-'.$data3['id'].'-'.$data4['id'].'" name="produit" value="'.$data4['id'].'" type="checkbox" onClick="CheckAll('.$lignetab.')"><span class="folder">'.$data4['nom'].'</span></li>';//j'affiche mon produit
echo '<script type=text/javascript>
/*pour chaque produit je met les infos du produit (l id des parents et du produits)*/
Itree['.$lignetab.'][0] = '.$data['id'].';
Itree['.$lignetab.'][1] = '.$data2['id'].';
Itree['.$lignetab.'][2] = '.$data3['id'].';
Itree['.$lignetab.'][3] = '.$data4['id'].';
</script>';
$lignetab++;// j'incrémente la ligne du tableau
}
echo '</ul></li>';
}
}
echo '</ul></li>';
}
}
echo '</ul></li>';
}
}
echo '</ul></div>';
echo '<input name="valider" value="VALIDER" type="submit"></form>'; |
merci d'avoir répondu comme demandé voilà le html générer :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <script type="text/javascript" src="./javascripts/jquery.js"></script>
<link rel="stylesheet" href="./javascripts/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="./javascripts/jquery.treeview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#activite").treeview({
unique: true
});
});
</script>
<script type="text/javascript">
var Itree[][]; //déclare le tableau en variable globale
function CheckAll(lignetab){//fonction appeler au click de la checkbox
document.write(Itree[lignetab][0]);//affiche la première entrée de mon tableau en fonction de la ligne
}
</script><form id="activ" method="post" action="modules.php?crud_module=produit2&crud_action=arboactivdesac">
<div id="treeActivites" class="demo">
<ul id="activite" class="filetree">
<li class="closed"><input id="1" value="1" name="activite" type="checkbox" onClick="CheckAll(0)">
<span class="folder">Motoculture</span>
<ul class="famille">
<li class="closed">
<input id="1-1" value="1" name="famille" type="checkbox" onClick="CheckAll(0)">
<span class="folder">Aspirateurs électriques</span>
<ul class="sousfamille">
<li class="closed">
<input id="1-1-1" value="1" name="sousfamille" type="checkbox" onClick="CheckAll(0)">
<span class="folder">Aspirateurs eau et poussières</span>
<ul class="produit">
<li class="closed">
<input id="1-1-1-353" name="produit" value="353" type="checkbox" onClick="CheckAll(0)">
<span class="folder">L appareil compact et maniable</span>
</li>
<script type=text/javascript>
Itree[0][0] = 1;
Itree[0][1] = 1;
Itree[0][2] = 1;
Itree[0][3] = 353;
</script> |