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>
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.