Afficher / masquer les colonnes d'un tableau sans rechargement

Télécharger le projet
Commenter

Description

Salut !
Ce code permet d'afficher le contenu d'une base de données dans un tableau. Les colonnes de ce tableau sont modifiables (masquer / afficher) grâce à des cases à cocher (sans avoir à recharger la page donc en JavaScript).
Il est aussi possible de classer les données en cliquant sur l'intitulé de la colonne (dans ce cas, la page sera rechargée, mais la liste des champs affichés ne changera pas)

Pour le tester, vous aurez besoin d'une base de données "liste" contenant les champs "IDClient", "nom", "prenom", "email", "adresse", "tel", "fax".
Il vous suffit ensuite de copier / coller tout le code dans un fichier "index.asp", de modifier les paramètres en début de page (voir plus loin si besoin)... et de revoir la mise en page qui est des plus... basiques ;) , et le tour est joué !

J'ai essayé de simplifier un maximum le code pour le rendre au mieux compréhensible et lisible (pas de gestion de pages par exemple), tout en essayant de garder un maximum de fonctionnalitées, mais il reste quelque peu compliqué... Donc si vous avez des questions, des coneils, ou n'importe quoi, n'hésitez pas, vous avez mon e-mail !

Source / Exemple : 


<%
' Script créé par matthieu
' matthieu.dev@laposte.net

' *******************************************************************************
' Cette page possède 2 formulaires : Un qui contient la liste de tout les champs 
' à afficher ou masquer (il ne sera pas envoyé)
' et un autre qui contient toutes les infos qui devront être transmisent à la page suivante
' Il se trouve en fin de page
' 2 formulaires car le premier peut être affiché ou masqué
' Tout les champs "colonnes" existent dans les 2 formulaires et sont mis à jours en JavaScript
' *******************************************************************************

' Pour utiliser ce code, il vous suffit de créer donc une table liste contenant les champs :
' "IDClient", "nom", "prenom", "email", "adresse", "tel", "fax".
' et de modifier le chemin d'accès à la base
' Et le tour est joué

' ----------------------------------------------------------------------------------
' Connexion à la base de donnée
' et Creation du curseur -
' ----------------------------------------------------------------------------------
Set Conn = Server.CreateObject("ADODB.Connection")
ConnString="DRIVER={Microsoft Access Driver (*.mdb)}; " & "DBQ=" & Server.MapPath("liste.mdb")
Conn.Open ConnString
Set rs = Server.CreateObject ("ADODB.recordset")

Couleurligne1 = "#C4CBFB" 'Couleur des lignes paires du tableau
Couleurligne2 = "#A0ACFA"   'Couleur des lignes impaires du tableau

' *******************************************************************************
' listChamp est un tableau qui contient pour chaque colonnes à afficher :
' listCols(i)(0) 
' => Le nom du champ tel qu'il sera écrit (titre des colonnes, 
' listCols(i)(1) 
' => Le nom de la colonne dans la BDD (ne doit pas contenir de caractères spéciaux ou des espaces)
' listCols(i)(2) 
' => affichage lors de la 1ere arrivée sur la page (0 : masqué par défault et 1 : affiché)
' Ici, 5 colonnes en tout, et 3 affichées par défault (si on ne modifie pas la valeur)
' listCols(i)(3)
' => Informations diverses : possibilité de faire d'ajouter des options suivant le type de chanp
' Par exemple, ici, si = 1 => lien vers l'email s'il existe
' *******************************************************************************
listCols =Array( _
	Array("Nom abonné", "Nom", "1","0"), _
	Array("Prénom abonné", "prenom", "1","0"), _
	Array("Email", "email", "1","1"), _
	Array("Adresse", "adresse", "1","0"), _
	Array("Téléphone", "tel", "0","0"), _
	Array("Numéro du Fax", "fax", "0","0"))

' Si le formulaire a déjà été chargé (par exemple si on modifie le classement des champs)
' Il faut récupérer les colonnes à afficher / masquer
If Request.Form("compteur") <> "" Then
     For i=0 To UBound(listCols,1)
        listCols(i)(2) = Request.Form("a" & listCols(i)(1))
     Next
End If
     %>
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
' Ces styles permettent d'afficher ou de masquer la liste des colonnes avec les cases à cocher
%>
<STYLE Type=Text/css>
FORM.expansion {
     COLOR: black
}
FORM.contraction {
     DISPLAY: none
}
</STYLE>
<script language="JavaScript">

// Fonction qui permet d'envoyer le formulaire du bas de page
// Et de modifier le classement des champs
function sendForm(classe, sens)
	{
	if (classe != "") document.formEnvoi.rec_classe.value = classe
	if (sens != "") document.formEnvoi.rec_sens.value = sens
	document.formEnvoi.submit()
	}

// Fonction qui permet d'afficher la liste des colonnes avec les cases à cocher
function affiche_liste_col()
	{
	enfant = document.getElementById("affCol")
	if (enfant.className=="contraction")
		{
		enfant.className="expansion" // On affiche
		}
	else
		{
		enfant.className = "contraction"  // On masque
		}
	}

//Fonction qui permet d'afficher ou masquer les colonnes du tableau
function modCol(whose)
	{
	coche = document.modcol.elements["a" + whose].checked // La case est cochée ou pas ?
	if (coche == true)   // Si la case est cochée => on devra afficher la colonne
		{
		document.formEnvoi.elements["a" + whose].value = "1" // Mémorise l'élément dans le formulaire principal
		affiche = "block"
		}
	else  // Sinon, on devra masquer la colonne
		{
		document.formEnvoi.elements["a" + whose].value = "0" // Mémorise l'élément dans le formulaire principal
		affiche = "none"
		}
	for (i=0;i<(document.formEnvoi.compteur.value);i++)  // Pour toutes les lignes du tableau
// Car compteur contient le nombre de lignes
		{
		document.getElementById(whose + i).style.display = affiche  // On masque ou on affiche la cellule
		}
	}
</script>
</head>

<body>
<a href="#" onclick="affiche_liste_col()">Modifier les colonnes</a>
<%
' ****************************************
' Ici, on affiche la liste de toutes les colonnes avec une case à cocher pour chacune d'elle
' Attention, si vous avez des champs à afficher, ne les mettez pas dans ce formulaire 
' il sera caché et pas envoyé
' ****************************************
%>
<form name="modcol" id="affCol" method="post" action="" Class='contraction'>
<table width="500" border="0" cellspacing="0" cellpadding="0"><%
'Pour tout les champs
For i=0 To UBound(listCols,1)
'Si une nouvelle colonne
     If colonne = 0 then%>
    <tr><%
End if%>
    <td width="20"><Input Type="checkbox" name="a<%=listCols(i)(1)%>" value="1"<%
If listCols(i)(2) = "1" Then Response.Write " CHECKED"
%> onClick="modCol('<%=listCols(i)(1)%>')"></td>
    <td width="120"><%=listCols(i)(0)%></td>
    <td width="13">&nbsp;</td><%
colonne = colonne + 1
     If colonne = 3 Then
        colonne = 0%>
    </tr><%
     End If
Next
%>
</table>
</form>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1">
    <tr align="center" valign="middle">
<%
' La première ligne contient le nom des colonnes
' Ce nom est cliquable pour pouvoir procéder à des tris sur les colonnes
' Dans ce cas, le 2eme formulaire sera envoyé en javascript pour mettre à jour les données
' (La page sera donc rechargée)
' Permet aussi de classer en sens inverse si on reclique sur le nom de la colonne
classe = Request.Form("rec_classe")
sens = Request.Form("rec_sens")
If sens = "" Then sens = 1

For i=0 To UBound(listCols,1)%>
    <td width="19" ID="<%=listCols(i)(1)%>0"<%
If listCols(i)(2) = "0" Then Response.Write " style='DISPLAY:none'"%>>
<a href="#" onclick="sendForm('<%=listCols(i)(1)%>', '<%
If classe = listCols(i)(1) Then 
     Response.Write -sens
Else
     Response.Write sens
End if%>')"><%=listCols(i)(0)%></a></td>
<%next
' Vous pouvez ensuite rajouter la liste des colonnes que vous souhaitez 
' Comme une colonne pour supprimer, une colonne pour modifier, où d'autres infos
' Ici j'affiche simplement l'ID du client avec un tri dessus
%>
<td><a href="#" onclick="sendForm('IDClient', '<%
If classe = "IDClient" Then 
     Response.Write -sens
Else
     Response.Write sens
End if%>')">IDClient</a></td>
    </tr>

    <%
' La première ligne est affichée
' On passe maintenant à l'affichage des autres lignes et à la récupération des données

'La table liste doit contenir tout les champs qui sont dans la fonction
' + un champ idClient dans mon exemple
'On récupère ce par quoi on veut trier
strsql = "SELECT * FROM liste"
If classe <> "" Then 
     strsql = strsql & " ORDER BY " & classe
     If sens = 1 Then strsql = strsql & " DESC"
     If sens = -1 Then strsql = strsql & " ASC"
End If
rs.Open strsql, Conn,1,2,1

' Compteur sers à mémoriser le nombre de lignes
' Utile surtout si on veut gérer un syteme de page
' Si on affiche tout les éléments sur la même page
' On peut récupérer la valeur par compteur = rs.recordCount
compteur = 0
color = 1
Do While Not rs.eof ' Pour tout les éléments => nouvelle ligne
    compteur = compteur +1
    'Modification de la couleur pour chaques ligne
    If color = 1 Then 
     b_color = Couleurligne1
    Else
     b_color = Couleurligne2
    End If
     color = - color
    %>
    <tr align="center" valign="middle" bgcolor="<%=b_color%>">
<%
'Pour tout les champs à afficher / masquer
For i=0 To UBound(listCols,1)
%>
    <td ID="<%=listCols(i)(1) & compteur%>"<%
' S'il faut masquer le champ
If listCols(i)(2) = "0" Then Response.Write " style='DISPLAY:none'"
%>><%
'Si c'est un champ email
if listCols(i)(3) = "1" AND rs(listCols(i)(1)) <> "" then 
	response.write "<a href='mailto:" & rs(listCols(i)(1)) & "'>" & rs(listCols(i)(1)) & "</a>"
else
	response.write rs(listCols(i)(1))
end if%></td>
<%next
'Et il faut ensuite rajouter toutes les colonnes que vous avez ajouter sur la première ligne
%>
<td><%=rs("idClient")%></td>
</tr>
    <%rs.MoveNext
Loop
%>
</table>
<%
' Et le formulaire qui sera envoyé 
%><form action="index.asp" method="post" name="formEnvoi">
    <Input Type="hidden" name="compteur" value="<%=compteur + 1%>">
    <Input Type="hidden" name="rec_classe" value="<%=classe%>">
    <Input Type="hidden" name="rec_sens" value="<%=sens%>">
<%
' On affiche les champs qui gèrent l'affichage des colonnes
For i=0 To UBound(listCols,1)%>
<Input Type="hidden" name="a<%=listCols(i)(1)%>" value="<%=listCols(i)(2)%>">
<%next%>

</form>
</body>
</html>
<%
'Sans oublier de fermer la connection à la fin
rs.close
Set rs = Nothing
Conn.close 
Set Conn = nothing%>

Conclusion :


Si vous avez des questions, n'hésitez pas à m'envoyer un mail !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (matche)