Liste déroulante avec multicolonnes avec checkbox [php / js / css]

Soyez le premier à donner votre avis sur cette source.

Vue 49 805 fois - Téléchargée 2 495 fois

Description

C'est un code sans prétention qui permet de créer une pseudo-balise SELECT contenant des checkbox à l'aide d'une balise DIV dont on fourni le type de débordement à scroll.

Ce code n'est pas compliqué à réaliser ni à comprendre : une fonction PHP pour créer le pseudo-composant select et deux fonction javascript pour gérer les événements.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test d'un select</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
	background-color : #EEEEEE;
	
}

legend {
	font: 11px Tahoma;
	color : #2266AA;
	padding : 0px 4px 0px 4px;
}

fieldset {
	border : 1px solid #AAAAAA;
	padding : 4px 4px 4px 4px;
}

/*
  ===========================
  balise obligatoire
  ===========================

  • /
.div_select { border: 1px solid #00CCFF; width : 400px; background-color : #FFFFFF; } .div_select_header { border-bottom: 1px solid #00CCFF; background-color : #00CCFF; } .div_select_header td { padding: 0px 6px 0px 6px; font: 11px Tahoma; font-weight: bold; background-color : #00CCFF; color: #FFFFFF; } .div_select_content td { padding: 0px 6px 0px 6px; font: 10px Tahoma; } .div_select_content { width : 400px; height : 172px ; overflow : scroll; scrollbar-face-color: #DDDDDD; scrollbar-shadow-color: #777777; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #eeeeee; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #eeeeee; scrollbar-arrow-color: #000000 } .select_even { cursor: hand; background: #FFFFFF; } .select_odd { cursor: hand; background: #F2FAFF; } .select_over { cursor: hand; background-color : #CCEEFF; color: #000000; font-weight: bold; } .select_checked { cursor: hand; background-color : #CCFF99; color: #000000; font-weight: bold; } .div_cadre { width: 600px; text-align:center; background-color: #FFFFFF; border : 1px dashed #CCCCCC; padding: 10px 20px 20px 20px; } </style> <script language="javascript" type="text/javascript"> /**
  • selectionne l'ensemble des elements d'une liste déroulante avec checkbox
  • @param :
  • - obj : le nom du pseudo-composant
  • - nb : nombre d'elements que contient le composant
  • /
function selectAll(obj, nb) { for (i=0; i< nb; i++) { document.getElementById(obj.id + i).checked = obj.checked; if(obj.checked) document.getElementById("tr_"+obj.id+i).className = "select_checked"; else { if(i % 2) css = "select_odd" else css ="select_even"; document.getElementById("tr_"+obj.id+i).className = css; } } } /**
  • selectionne l'ensemble des elements d'une liste déroulante avec checkbox
  • @param :
  • - obj : le nom du pseudo-composant
  • - el_id : id de l'element (position dans le composant)
  • - ev : le type d'evenement
  • - css_defaut : le style de la ligne par defaut
  • - nb : le nombre d'elements
  • /
function setEvenement(obj, el_id, ev, css_defaut, nb, provenance) { //--- recuperation des balises comp = document.getElementById(obj); tr = document.getElementById("tr_" + obj + el_id); ck = document.getElementById(obj + el_id); //--- si il s'agit d'un clique if(ev == "click") { //--- alors on coche ou decoche la checkbox if(provenance = "td") ck.checked = !ck.checked; //--- si on decoche, alors on decoche aussi la checkbox du composant if(!ck.checked) { if(comp.checked) comp.checked = false; } else { //---sinon on vérifie que tous les elements sont cochés var absent = false; var i = 0; while(i < nb && absent == false) { if(i != el_id) { if(!document.getElementById(obj + i).checked) absent = true; } i++; } if(comp.checked == absent) comp.checked = !absent; } } //--- autres evenements switch(ev) { case "over": tr.className = "select_over"; break; case "out": if(ck.checked) tr.className = "select_checked"; else tr.className = css_defaut; break; } } </script> </head> <body> <?php /**
  • permet de créer le pseudo-composant
  • @param :
  • - nom : le nom du composant
  • - structure : les colonnes, les dimensions, les alignements (tableau)
  • - contenu : les elements : valeur checkbox + autres colonnes (tableau)
  • - selection : tableau de valeur a selectionner (correspond a la valeur de la checkbox)
  • /
function checkedSelect( $nom, $structure, $contenu, $selection = null) { //////////////// entete du composant \\\\\\\\\\\\\\\\\\\\\\\\\ if(sizeof($selection) == sizeof($contenu)) $checked = "checked"; else $checked = ""; $str = '<div class="div_select">' .'<div class="div_select_header">' .'<table width="100%">' .'<tr>' .'<td width="20" align="center"><input type="checkbox" id="'.$nom.'" onClick="javascript:selectAll(this, '.sizeof($contenu).');" '.$checked.'/></td>'; //--- colonnes for($i = 0, $max = sizeof($structure); $i < $max; $i++) { $str .= '<td '; if(isset($structure[$i]["align"])) $str .= 'align="'.$structure[$i]["align"].'" '; if(isset($structure[$i]["width"])) $str .= 'width="'.$structure[$i]["width"].'" '; $str .= '>'.$structure[$i]["name"].'</td>'; } $str .= '<td width="1"></td>' .'</tr>' .'</table>' .'</div>'; //////////////// contenu du composant \\\\\\\\\\\\\\\\\\\\\\\\\ $str .= '<div class="div_select_content" >' .'<table width="96%">'; //--- pour chaque ligne for($i = 0, $max = sizeof($contenu); $i < $max; $i++) { //--- style css (pair / impair) if($i%2) $css_defaut = 'select_odd'; else $css_defaut = 'select_even'; //--- element selectionne ? if($selection != null && in_array($contenu[$i][0],$selection)) { $checked = ' checked'; $css = 'select_checked'; } else { $checked = ''; $css = $css_defaut; } //--- la checkbox $str .= '<tr id="tr_'.$nom.$i.'" class="'.$css.'" onMouseOver=\'javascript:setEvenement("'.$nom.'","'.$i.'","over","'.$css.'",'.sizeof($contenu).',"td");\' onMouseOut=\'javascript:setEvenement("'.$nom.'","'.$i.'","out","'.$css_defaut.'",'.sizeof($contenu).',"td");\' ' .' onClick=\'javascript:setEvenement("'.$nom.'","'.$i.'","click", "'.$css_defaut.'",'.sizeof($contenu).',"td");\' >' .'<td width="20" ><input type="checkbox" id="'.$nom.$i.'" name="'.$nom.'[]" value="'.$contenu[$i][0].'" onClick=\'javascript:setEvenement("'.$nom.'","'.$i.'","click","'.$css_defaut.'",'.sizeof($contenu).',"ck");\' '.$checked.' /></td>'; //--- les colonnes for($j = 1; $j < sizeof($contenu[$i]); $j++) { $str .= '<td '; if(isset($structure[$j-1]["align"])) $str .= 'align="'.$structure[$j-1]["align"].'" '; if(isset($structure[$j-1]["width"])) $str .= 'width="'.$structure[$j-1]["width"].'" '; $str .= '>'.$contenu[$i][$j].'</td>'; } $str .= '</tr>'; } //--- fermeture des balises $str .= '</table>' .'</div>' .'</div>'; return $str; } //=============================================================== // VARIABLES D'EXEMPLES //=============================================================== $nom = "test1"; $structure = array ( array("name" => "CODE", "align" => "center", "width" => "40px"), array("name" => "NOM", "align" => "left", "width" => null) ); $contenu = array ( array("AD", "AD", "TEST AD"), array("CC", "CC", "TEST CC"), array("DZ", "DZ", "TEST DZ"), array("GV", "GV", "TEST GV"), array("LS", "LS", "TEST LS"), array("LC", "LC", "TEST LC"), array("SG", "SG", "TEST SG") ); $nom2 = "test2"; $structure2 = array ( array("name" => "CODE", "align" => "center", "width" => "40px"), array("name" => "NOM", "align" => "left", "width" => null), array("name" => "MONTANT", "align" => "right", "width" => "60px") ); $contenu2 = array ( array("001", "001", "TEST 01", "150 ?"), array("002", "002", "TEST 02", "80 ?"), array("003", "003", "TEST 03", "120 ?"), array("004", "004", "TEST 04", "160 ?"), array("005", "005", "TEST 05", "20 ?"), array("006", "006", "TEST 06", "70 ?"), array("007", "007", "TEST 07", "150 ?") , array("005", "005", "TEST 08", "2 654 ?"), array("009", "009", "TEST 09", "34 ?"), array("010", "010", "TEST 10", "27,50 ?") ); //====================================================== // VERFICATION DU POST //====================================================== if($_POST["submit"]) { echo '<b>Formulaire validé avec les éléments : </b><br>'; echo '<b>- '.$nom.' :</b> '; for($i = 0; $i < sizeof($_POST[$nom]); $i++) { if($i > 0) echo ', '; echo $_POST[$nom][$i]; } echo '<br /><b>- '.$nom2.' :</b> '; for($i = 0; $i < sizeof($_POST[$nom2]); $i++) { if($i > 0) echo ', '; echo $_POST[$nom2][$i]; } echo '<br /><br />'; } ?> <!-- SelectableTableRows multiple--> <div align="center"> <div class="div_cadre"> <fieldset> <legend>Test de selection</legend> <form name="form_select" method="post" action="<?php echo $PHP_SELF; ?>"> <div align="center" > <?php echo checkedSelect($nom, $structure, $contenu, $_POST[$nom]); ?> <br /> <?php echo checkedSelect($nom2, $structure2, $contenu2, $_POST[$nom2]); ?> <br /><input type="submit" name="submit" value="envoyer" /> </div> </form> </fieldset> </div> </div> </body> </html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
samedi 7 janvier 2006
Statut
Membre
Dernière intervention
19 octobre 2009

Bonjour,

Je sais que se topic date, mais je n'aimerais polluer le forum en en créant un autre.

Bref, j'utilise le code suivant pour un projet d'étude que je dois réalisé. Le souci est que j'aimerais appeler, dans une autre page, un tableau qui contient seulement les valeurs des checkbox qui ont été 'checked', mais je ne sais pas comment m'y prendre...

la seule chose dont je suis au courant est qu'il faut que j'utilise le nom de la checkbox.

J'éspère que vous pourrez m'aider

Merci d'avance
Messages postés
198
Date d'inscription
lundi 28 février 2005
Statut
Membre
Dernière intervention
14 novembre 2008

ramzi regarde ceci tu va être dégouté : http://webfx.eae.net/dhtml/collist/demo.html
Tu peut même déplacer les colonnes dynamiquement ! Comme dans Windows !
Messages postés
4
Date d'inscription
lundi 8 décembre 2003
Statut
Membre
Dernière intervention
28 août 2006

joli code et très utile.

Merci ^_^
Messages postés
27
Date d'inscription
lundi 18 novembre 2002
Statut
Membre
Dernière intervention
19 juin 2006

Oups !

désolé pour toutes c'est jolies petites fautes !

je mettrais à jour le code ainsi que le zip !

Merci encore pour les critiques ...
Messages postés
145
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
1 mai 2012

erreur js

test for equality (==) mistyped as assignment (=)?
Fichier source : http://localhost/testcheckbox.php
Ligne : 143, Colonne : 32
Code source : if(provenance "td") ck.checked !ck.checked;
Afficher les 11 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.