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

Soyez le premier à donner votre avis sur cette source.

Vue 49 247 fois - Téléchargée 2 463 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

EricLeGrand77
Messages postés
15
Date d'inscription
mercredi 12 février 2003
Statut
Membre
Dernière intervention
14 août 2006
-
Ton code source ne fonctionne pas en faisant un copier-coller sur Firefox 1.5. Peux-tu vérifier que c'est la bonne version ?
cs_ramzy
Messages postés
27
Date d'inscription
lundi 18 novembre 2002
Statut
Membre
Dernière intervention
19 juin 2006
-
Le code semble fontionner sous Firefox 1.5 en faisant un copier/coller. Je rajoute un fichier zip pour que tu testes à partir du fichier d'exemple.

N'hésite pas à me contacter en cas de problème.
EricLeGrand77
Messages postés
15
Date d'inscription
mercredi 12 février 2003
Statut
Membre
Dernière intervention
14 août 2006
-
Bonjour Ramzy c'est Eric (lol)

J'ai 3 notice en ligne 315 (Notice: Undefined index: submit ) 343 (Notice: Undefined index: test1) et 345 (Notice: Undefined index: test2). Pas grave en soit. Par contre après avoir sélectioner des 2 items dans la liste 1 et un dans la liste 2 (et quleques soit les autres cas aussi) j'ai le message suivant :
Forbidden
You don't have permission to access /
Notice: Undefined variable: PHP_SELF in e:\program files\easyphp1-8\www\check_select.php on line 341
on this server.

NB : J'ai PHP easy php 1.8 avec la version PHP est le 4.3.10
cs_ramzy
Messages postés
27
Date d'inscription
lundi 18 novembre 2002
Statut
Membre
Dernière intervention
19 juin 2006
-
A mon avis il faut changer $PHP_SELF par $_SERVER['PHP_SELF'], sinon pour les autres essai $HTTP_POST_VARS à la place de $_POST.
youspim
Messages postés
21
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
17 juillet 2008
-
Salut Ramzy,

Merci pour ce code !

Pour le petit soucis que decrit EricLeGrand, je l'ai eu aussi mais le l'ai corrigé en utilisant la fonction isSet.

Voici les lignes que j'ai modifié :
** ligne 315 :
avant --> if($_POST["submit"]) {
apres --> if(isSet($_POST["submit"])) {

** ligne 343 :
avant --> <?php echo checkedSelect($nom, $structure, $contenu, $_POST[$nom]); ?>

apres --> <?php
if (isSet($_POST[$nom])) { echo checkedSelect($nom, $structure, $contenu, $_POST[$nom]); }
else { echo checkedSelect($nom, $structure, $contenu, ""); }
?>

** ligne 345 :
avant --> <?php echo checkedSelect($nom2, $structure2, $contenu2, $_POST[$nom2]); ?>
apres --> <?php
if (isSet($_POST[$nom2])) { echo checkedSelect($nom2, $structure2, $contenu2, $_POST[$nom2]); }
else { echo checkedSelect($nom2, $structure2, $contenu2, ""); }
?>

A+

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.