Msfexgrid pour javascript multiselection de criteres (ie)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 474 fois - Téléchargée 26 fois

Contenu du snippet

Le select de base html ne permet pas une mise en forme du type msflexgrid du visual basic avec se code on peut emuler cette fonction, qui peut servir pour faire de formulaires de type bon de commande. Cet un code basic, qui peut être derivé facilement. Il n'a pas d'autre ambition que de fournir une solution clef en main. Attention ce code est uniquement testé et developpé pour IE !

Source / Exemple :


<html>
<head>
<title>Idem MSFEXGRID Visual BASIC</title>
<script>
/* Auteur CC */
/* 	
	fonction de selection multicolonne 
	toutes les colonne d'une même ligne sont selectionnée par 1 clic
	et deselectionnés si deja selectionnés

  • /
function selectFast(idname){ var ta = document.getElementById(idname+".a"); var tb = document.getElementById(idname+".b"); if ( ta.style.background == "#0000ff" ) { ta.style.background = "#ffffff"; ta.style.color = "#000000"; tb.style.background = "#ffffff"; tb.style.color = "#000000"; } else { ta.style.background = "#0000ff"; ta.style.color = "#ffffff"; tb.style.background = "#0000ff"; tb.style.color = "#ffffff"; } } /* fonction de transfert d'un table à l'autre on peut sans doute améliorer cette partie de code je ne suis pas un super pro du javascript, la idem avec les identifiants on passe d'une table à l'autre
  • /
function AddFast() { var j=0; var lines = 100; // suivant votre tableau d'entrée for (var i=0; i<lines; i++){ var ta = document.getElementById("t"+i+".a"); if ( ta.style.background == "#0000ff" ) { id = "m"+j+".z"; m = document.getElementById(id); document.all[id].innerHTML = j; id = "m"+j+".q"; m = document.getElementById(id); m.disabled = false; m.value = "1"; m.focus(); idm = "m"+j+".a"; m = document.getElementById(id); idt = "t"+i+".a"; v = document.getElementById(id); document.all[idm].innerHTML = document.all[idt].innerHTML; idm = "m"+j+".b"; m = document.getElementById(id); idt = "t"+i+".b"; v = document.getElementById(id); document.all[idm].innerHTML = document.all[idt].innerHTML; j++; } } } function Clear() { var j=0; var lines = 100; for (var i=0; i<lines; i++){ id = "m"+j+".z"; m = document.getElementById(id); if ( document.all[id].innerHTML != "&nbsp;" ) { id = "m"+j+".z"; m = document.getElementById(id); document.all[id].innerHTML = "&nbsp;"; id = "m"+j+".q"; m = document.getElementById(id); m.value = ""; m.disabled = true; idm = "m"+j+".a"; m = document.getElementById(id); idt = "t"+i+".a"; v = document.getElementById(id); document.all[idm].innerHTML = "&nbsp;"; idm = "m"+j+".b"; m = document.getElementById(id); idt = "t"+i+".b"; v = document.getElementById(id); document.all[idm].innerHTML = "&nbsp;"; j++; } } } </script> </head> <BODY> <table width=926 border=0> <tr> <td width="487"> <TABLE ALIGN=left BORDER=1 width=101% CELLPADDING=5> <th bgcolor="#9AA2AF" align=center width="146">Reference</th> <th bgcolor="#9AA2AF" align=center width="262">Designation</th> <th bgcolor="#9AA2AF" align=center width="3">&nbsp;</th> </table> </td> <td width="91">&nbsp;</td> <td width="332"> <table align=left border=1 width=100% cellpadding=5> <!-- les libellés des colonnes | columms label --> <th bgcolor="#9AA2AF" align=center width="150">index</th> <th bgcolor="#9AA2AF" align=center width="100">Quantité</th> <th bgcolor="#9AA2AF" align=center width="100">Designation</th> <th bgcolor="#9AA2AF" align=center width="200">Reference</th> <th bgcolor="#9AA2AF" align=center width="10">&nbsp;</th> </table> </td> </tr> <tr> <td width="487"> <div style="width:100%; overflow:auto;height:200Px;"> <TABLE ALIGN=left BORDER=1 width=100% CELLPADDING=5> <script> /* creation dynamique de la table de référence -> vous pouvez créer autant de colonnes que vous le souhaitez le tout est de leur donner un id différant
  • /
for (i=0;i<100;i++){ document.write("<TR>"); var str = ""; str = "<a onclick='selectFast(\"t" + i + "\")'>" str += "<td width=\"120\" id=\"t" + i + ".a" + "\">article " + i + "</TD>" str += "<td width=\"220\" id=\"t" + i + ".b" + "\">value " + i + "</TD>"; document.write(str); document.write("</a></TR>"); } </script> </TABLE> </div> </td> <td width="91">&nbsp;</td> <td width="332"> <div style="width:100%; overflow:auto;height:200Px;"> <table align=left border=1 width=100% cellpadding=5> <script> /* création de la table receptrice même principe, avec en plus des champs index et quantité
  • /
for (i=0;i<100;i++){ document.write("<TR>"); var str = ""; str = "<TD width=200 id=\"m" + i + ".z" + "\">&nbsp;<td>"; document.write(str); str = "<TD><input size=5 STYLE=\"text-align: right;\" type=\"text\" id=\"m" + i + ".q\" name=\"m" + i + ".q\" DISABLED><td>"; document.write(str); str = "<TD width=200 id=\"m" + i + ".a" + "\">&nbsp;<td>"; document.write(str); str = "<TD width=200 id=\"m" + i + ".b" + "\">&nbsp;<td>"; document.write(str); document.write("</TR>"); } </script> </table> </div> </td> </tr> <tr> <td> <input id=bouton1 onClick="AddFast();" type=button value="Add" name="button"> </td> <td> &nbsp; </td> <td valign="top"> <input id=bouton2 onClick="Clear();" type=button name="Clear" value="clear"> </td> </table> <tr width=300> <td width=300>&nbsp; </td> </tr> </body> </html>

Conclusion :


pour la mise en forme des colonnes je ne me suis pas foulé, mais ce n'est qu'un example.

A voir également

Ajouter un commentaire

Commentaires

cs_kitian
Messages postés
4
Date d'inscription
mardi 17 décembre 2002
Statut
Membre
Dernière intervention
7 décembre 2004

iubito,
Juste une reponse, http://www.mywebsearch.com/jsp/home.jsp pas sur mais je pense que c'est là.
cs_iubito
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006

euh juste une kestion, ta barre mywebsearch dans IE tu l'as trouvé où ?

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.