exemple de code : page PHP
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Cache-Control" content="max-age=60000;s-maxage=60000">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page de test : menu arborescence</title>
<link rel="stylesheet" type="text/css" href="../../CSS/menu_tree.css">
<script type="text/javascript" src="../../scripts/menu_tree.js"></script>
<script type="text/javascript" src="../../scripts/tools_box.js"></script>
<script type="text/javascript">
var ConnexionId = <?=$ConnexionId; ?>;
var NodeId = <?=$NodeId; ?>;
var Language = '<?=$Langue; ?>';
//recherche de la page a afficher dansd le variable JavaScript du header.php
var PageData = parent.parent.frames['header'].DataPage;
function f_onload(){
parent.update_Pos_Frames();
parent.ie_resize();
setTimeout(' createTree();',10); //permet d'afficher la page corectement avant de charger l'arbre
}
function createTree(){
creat_menu ('../../fonctionPhp/creat_DOMtoXML.php?ConnexionId=<?=$ConnexionId; ?>', 'PointGaz_tree', 'le_menu');
//effacement du span chargement
document.getElementById('loadLibelle').style.display='none';
parent.update_Pos_Frames();
parent.ie_resize();
//selection de id
open_id(NodeId,true);
setDataPage(null,null);
}
</script>
</head>
<body onload="javascript:f_onload();">
<div id="le_menu" style="width:100%; float: left;">
</div>
<span id="loadLibelle" style="display:block;"><?=iLib("_Loading")?></span>
<div id="modele" style="display:none;">
<ul id="first_ul">
<li id="first_li" class="cacheli"><span class="mt_joint" onclick="nodes_expand(this.parentNode);"></span><a name="N_Father" class="notopen_li" onclick="node_select(this.parentNode);setDataPage(this.parentNode.id,null);"><b class="notselect_li">texte node</b></a><span class="notalarm"></span></li></ul>
<form id="ren_li" action="javascript:document.form_ren.parentNode.focus();">
<input name="input_ren" type="text" value="" title="<?=iLib("_Rename_the_node"); ?>" size="35" onBlur="close_ren();"/>
</form>
<form name="transaction" target="datas" method="POST" action="update_tree.php?ConnexionId=<?=$ConnexionId; ?>&NodeId=<?=$NodeId; ?>&Lang=<?=$Langue; ?>">
<input name="input_id" type="hidden" value=""/>
<input name="input_libelle" type="hidden" value=""/>
<input name="input_action" type="hidden" value=""/>
<input name="input_parent" type="hidden" value=""/>
</form>
</div>
</body>
</html>
========================================
Exemple de Code : Page js associée
// constantes globales, à modifier en fonction du fichier XML
var tagName_root="PointGaz_tree";
var tagName_li="pg_node";
var tagName_value="value";
// Variables globales
var xmlDoc;
var root_mn_node;
var root_mn_alm;
var next_select_id;
var next_select=null;
var ren_node=null; // noeud en cours de renomage
// Variables navigateur
var browserName;
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
function importfileXML(fichier) {
// Ouverture du fichier xml en fonction du navigateur
if (moz) {
var objXML = document.implementation.createDocument('','doc',null);
var objXMLHTTP = new XMLHttpRequest();
objXMLHTTP.open("GET",fichier, false);
objXMLHTTP.send(null);
xmlDoc = objXMLHTTP.responseXML;
browserName="Mozilla";
}
else if (ie) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
xmlDoc.load(fichier);
browserName="Internet Explorer";
}
}
//-----------------------------------------------------------------------------
// FONCTION de creation du MENU : creat_menu
//
// fichier : Nom du fichier XML
// root_node : Id Racine du fichier XML
// location_menu : Id du DIV Racine du menu
//-----------------------------------------------------------------------------
function creat_menu (fichier, root_node, location_menu){
// Ouverture du fichier XML en fonction du navigateur
importfileXML(fichier);
// Positionnement à la racine du fichier XML
var rootxml=xmlDoc.getElementsByTagName(root_node);
if(rootxml.length>0){
creat_ul(rootxml[0],location_menu,true);
next_select=document.getElementById("F_root").firstChild;
}//fin du if
}// FIN de creat_menu
//-----------------------------------------------------------------------------
// FONCTION de creation des UL : creat_ul
//-----------------------------------------------------------------------------
function creat_ul(xml_actu, html_father_id, last_ul){
// Clonage des ULs de référence
var clone_ul=document.getElementById("first_ul").cloneNode(false);
// Modification de la class si dernier UL
if (last_ul==true){clone_ul.className='mt_lastul';}
// Mise à jour de l'id du UL, traitement spécifique pour le 1er noeud
if(xml_actu.tagName==tagName_root){
clone_ul.setAttribute("id","F_root");
clone_ul.style.display="block";
}
else {
// Affectation des Id sur les clones
var xml_id=xml_actu.getAttribute('Id');
clone_ul.setAttribute("id","F_" + xml_id);
}
// Création du noeud et ratachement à son pére
var father_li=document.getElementById(html_father_id);
var new_ul=father_li.appendChild(clone_ul);
// Scrutation des fils du UL en cours
var nbalm=0;
var pointeur=xml_actu.firstChild;
var pointeurNext=null;var last_child=null;
while (pointeur!=null){
if(pointeur.tagName==tagName_li){ // Elimination des noeuds de type text (Gecko)
pointeurNext = pointeur.nextSibling;
last_child=true;
// Recherche si dernier LI du UL en cours
while (pointeurNext!=null & last_child){
if(pointeurNext.tagName==tagName_li){last_child=false;}
pointeurNext=pointeurNext.nextSibling;
}//fin du while
// Création des LI
nbalm=nbalm+creat_li(pointeur, new_ul.id, last_child);
}
pointeur=pointeur.nextSibling;
}//fin du while
return nbalm;
} // FIN de creat_ul
//-----------------------------------------------------------------------------
// FONCTION de creation des LI : creat_li
//-----------------------------------------------------------------------------
function creat_li (xml_actu,html_father_id, last_li){
// Clonage des LI de référence
var clone_li=document.getElementById("first_li").cloneNode(true);
// Affectation des Id sur les clones
var xml_id=xml_actu.getAttribute('Id');
clone_li.setAttribute("id",xml_id);
// Affectation des attributs du clone li
var clone_li_span_mn = clone_li.childNodes[0];
var clone_li_a = clone_li.childNodes[1];
clone_li_a.name="N_"+xml_id;
clone_li_a.className=xml_actu.getAttribute('Type');
clone_li_a.childNodes[0].innerHTML=xml_actu.getAttribute('Libelle');
// Modification de la class si dernier du UL
if (last_li){
clone_li_span_mn.className='mt_lastjoint';}
else {
clone_li_span_mn.className='mt_joint';}
// Recherche des fils : modification de la classe du li
var no_child= true;var valeur_li="";
var pointeur= xml_actu.firstChild;
while (pointeur!=null & no_child){
if(pointeur.tagName==tagName_li){no_child=false;}
// Modification du titre avec la valeur si existante
if(pointeur.tagName==tagName_value & pointeur.firstChild!=null ){valeur_li=pointeur.firstChild.data;}
pointeur=pointeur.nextSibling;}
// Insertion de la valeur du noeud en titre
clone_li_a.title=valeur_li;
// Modification de la position du background en fonction du type de noeud
if (!no_child){
clone_li.className="cacheli";}
else {
clone_li.className="nochild";
clone_li_span_mn.removeAttribute("onclick");
if (ie){clone_li_span_mn.onclick="#";}
}// Fin du else
// Création du noeud et ratachement à son pére
var new_li=document.getElementById(html_father_id).appendChild(clone_li);
// Si des fils création d'un nouveau UL
var nbalm=0;
if (!no_child){nbalm=creat_ul (xml_actu,html_father_id,last_li);}
// Affectation des attributs du clone li alarme
var new_li_span_alm = new_li.childNodes[2];
var text_alm=xml_actu.getAttribute('Alarme');
if (text_alm!=null & text_alm!=""){
new_li_span_alm.title=xml_actu.getAttribute('Alarme');
new_li_span_alm.className="alarm";
nbalm++;}
else if(nbalm>0)
{
new_li_span_alm.title=nbalm+" alarme(s)";
new_li_span_alm.className="alarm";}
return nbalm;
}// FIN de creat_li()
//-----------------------------------------------------------------------------
// FONCTION d'ouverture fermeture d'un noeud : nodes_expand
//
// noeud : noeud (le LI)
//-----------------------------------------------------------------------------
function nodes_expand (noeud){
if(noeud.className=="voirli"){
noeud.className="cacheli";
if (ie){noeud.nextSibling.style.display="none";}
}
else{
noeud.className="voirli";
if (ie){noeud.nextSibling.style.display="block";}
}
}// FIN de nodes_expand
//-----------------------------------------------------------------------------
// FONCTION node_open
//
// HTMLobj : Objet HTML visé par la classe
// Classe : Nom de la classe à appliquer
//-----------------------------------------------------------------------------
function node_open (noeud)
{
noeud.className="voirli";
if (ie){noeud.nextSibling.style.display="block";}
}
//-----------------------------------------------------------------------------
// FONCTION node_close
//
// HTMLobj : Objet HTML visé par la classe
// Classe : Nom de la classe à appliquer
//-----------------------------------------------------------------------------
function node_close (noeud)
{
noeud.className="cacheli";
if (ie){noeud.nextSibling.style.display="none";}
}
function open_id(nodeid,nodefocus)
{
if(nodeid==null & next_select!=null)nodeid=next_select.id;
if(nodeid!=null){
var cible_li=document.getElementById(nodeid);
if (cible_li!=null){
var cible_ul=cible_li.parentNode;
if(cible_ul.id!="F_root"){
node_open (cible_ul.previousSibling);
open_id(cible_ul.previousSibling.id,false);
}//fin du if
if (nodefocus){
node_select(cible_li);
}//fin du if
}//fin du if
}//fin du if
}//fin de open_id
//-----------------------------------------------------------------------------
// FONCTION d'ouverture de tous les fils d'un nœud : open_all
//
// noeud : nœud de départ
//-----------------------------------------------------------------------------
function open_all(noeud){
if(noeud==null){noeud=next_select;}
while (noeud!=null){
if(noeud.tagName=='UL'){
// Changement de la classe du nouveau nœud précédent
noeud.previousSibling.className="voirli";
if (ie){noeud.style.display="block";}
// appel de la fonction open_all()
if(noeud.firstChild!=null){open_all(noeud.firstChild);}
}// fin du if
noeud=noeud.nextSibling;
}// fin du while
}// FIN de open_all()
//-----------------------------------------------------------------------------
// FONCTION de fermeture de tous les fils d'un nœud : close_all
//
// noeud : nœud de départ
//-----------------------------------------------------------------------------
function close_all(noeud){
if(noeud==null){noeud=next_select;}
while (noeud!=null){
if(noeud.tagName=='UL'){
// Changement de la classe du nouveau nœud précédent
noeud.previousSibling.className="cacheli";
if (ie){noeud.style.display="none";}
//appel de la fonction close_all()
close_all(noeud.firstChild);
}// fin du if
noeud=noeud.nextSibling;
}// fin du while
}// FIN de close_all()
//-----------------------------------------------------------------------------
// FONCTION de sélection d'un nœud : node_select
//
// noeud : nœud à selectionner
//-----------------------------------------------------------------------------
function node_select(noeud){
// Changement de la classe du nœud précedament sélectionné
if(next_select!=null){
className = next_select.childNodes[1].className
className = className.replace('select_li','')+' notselect_li';
next_select.childNodes[1].className = className;
}
// if (noeud==null){return null;}
// Changement de la classe du nouveau nœud sélectionné
className = noeud.childNodes[1].className;//.split(' ');
className = className.replace('notselect_li','')+' select_li';
noeud.childNodes[1].className = className;
// noeud.childNodes[1].className='select_li';
if(next_select!=null)document.transaction.input_parent.value=next_select.id;
document.transaction.input_id.value=noeud.id;
next_select=noeud;
// Etablissement du focus sur le nouveau nœud
noeud.childNodes[1].focus();
//mise a jour du formulaire de l'onget recherche:
parent.parent.frames['tools_0'].document.formulaire.NodeId.value = noeud.id;
parent.parent.frames['tools_0'].document.getElementById('libelle_node_selected').innerHTML = noeud.childNodes[1].firstChild.innerHTML;
}// FIN de node_select()
function renome_li(){
// Si absence de sélection, sortir de la fonction
if(next_select==null){return null}
if(document.transaction.input_action.value==""){
document.transaction.input_action.value="renomer";
ren_node=next_select; //mise en mémoire du noeud
// Mise à jour des attributs du FORM de référence
var ren_li=document.form_ren;
// Mise à jour de la valeur du INPUT
var origine_texte=ren_node.childNodes[1].childNodes[0].firstChild.data;
ren_li.input_ren.value=origine_texte;
document.transaction.input_libelle.value=origine_texte;
//cache le "b"
ren_node.childNodes[1].childNodes[0].style.display="none";
// création du noeud
ren_node.childNodes[1].appendChild(ren_li);
ren_li.input_ren.focus();
if (ie){ren_li.input_ren.setActive();}
}
}// FIN de renome_li()
function close_ren(){
var new_texte=document.form_ren.input_ren.value;
if (new_texte!=document.transaction.input_libelle.value){
document.transaction.input_libelle.value=document.form_ren.input_ren.value;
if(envoi_transaction()){document.form_ren.parentNode.firstChild.innerHTML=new_texte;}
}
document.form_ren.parentNode.firstChild.style.display="inline";
document.getElementById("modele").appendChild(document.form_ren);
document.transaction.input_action.value="";
}
function suprime_node(){
if(document.transaction.input_action.value==""){
document.transaction.input_action.value="suprimer";
if(!envoi_transaction()){reset_action()};
}
}
function ajout_node(){
if(document.transaction.input_action.value==""){
document.transaction.input_action.value="ajouter";
//ajout du nu=auveau noeud dans le navigateur
//test la presence de noeud fils ( test si il y a un ul)
var testUl = false;
var next_select_nSi = next_select.nextSibling;
var clone_ul = null;
var clone_li = null;
if(next_select_nSi!=null)
if(next_select_nSi.tagName=='UL') testUl = true;
if(!testUl){ //creation du ul et d'un li
clone_ul=document.getElementById("first_ul").cloneNode(true);
if(next_select_nSi==null) clone_ul = next_select.parentNode.appendChild(clone_ul);
else clone_ul = next_select.parentNode.insertBefore(clone_ul,next_select_nSi);
//gestion du ul
if(next_select.childNodes[0].className=='mt_lastjoint')clone_ul.className='mt_lastul'; //gestion des derniere ligne
clone_ul.style.display="block";
clone_ul.id="F_"+next_select.id;
//gestion du li
clone_li = clone_ul.firstChild;
clone_li.childNodes[0].className='mt_lastjoint'; //span
next_select.childNodes[0].className='mt_lastjoint'; //spam
}
else { //creation du d'un li
clone_li=document.getElementById("first_li").cloneNode(true);
clone_li = next_select.nextSibling.insertBefore(clone_li,next_select.nextSibling.firstChild);
}
//remplisage des champs du nouveau li:
clone_li.className="nochild";
clone_li.id="new_node";
clone_li.childNodes[1].childNodes[0].innerHTML="Nouveau Noeud"; //libelle (balise a)
//selection du nouveau li
open_id(clone_li.id,true);
//envoir du formulaire:
var bol = envoi_transaction();
//si refut de changement supresion du nouveau noeud de l'arbre
if(!bol){
open_id(clone_li.parentNode.previousSibling.id,true); //selection du pere du nouveau noeud
if(clone_ul!=null) next_select.parentNode.removeChild(clone_ul);
else if(clone_li!=null)next_select.nextSibling.removeChild(clone_li);
reset_action();
}//fin du if
}//fin du if
}//fin de ajout_node
function envoi_transaction(){
msgconf=confirm("Voulez vous "+document.transaction.input_action.value+" un élément dans l'arbre");
if (msgconf){
document.transaction.submit();
return true;
}// fin du if
return false;
}
function reset_action(){
document.transaction.input_action.value="";
}
function move_node(){
// Si absence de sélection, sortir de la fonction
window.showHelp("../AlphaTracer.chm")
}// FIN de renome_li()