DominoArea.org [Archive]

Un petit tips pour disposer d une vue indentée avec une gestion des "flèches vertes" des catégories.

Tout d abord dans la conception même de la vue, il faut considérer le contenu comme étant du HTML.
lors de l'affichage des différents documents ce sera donc a vous de gerer les TR et les TD, idem dans le view template ne pas oublier de traiter le masque comme html et de placer les balise table autour du champ viewbody.

Au niveau de la conception de la vue,
Les colonnes catégorisées utilisent la fonction choix_icone() contenue dans le js.
Exemple de code pour la 1ere colonne catégorisée d'une vue affichant 4 colonnes :

Code : Tout sélectionner

"<TR><TD colspan=\"4\" class=\"td1\"><SCRIPT>choix_icone(\'"+@DocNumber+"\');</SCRIPT>"+libelle+"</TD></TR>";

Le JS suivant est intégré au view template, les <valeur calculée> correspondant au chemin de l'image ou au chemin de la vue :

Code : Tout sélectionner

<script language="Javascript">
function choix_icone(docNumber) {
 Expand = window.location.href.indexOf('&Expand');
 Collapse = window.location.href.indexOf('&Collapse');
var img1="<img style=\"{float: none; cursor: hand}\" src=\"<Valeur calculée>/plie.gif\"";
var img2="<img style=\"{float: none; cursor: hand}\" src=\"<Valeur calculée>/deplie.gif\"";
var html="";

StartDeb = window.location.href.indexOf('&Start=');
StartFin = window.location.href.lastIndexOf('&');
if (StartDeb == -1) {
Start = '';
}
else {
Start = window.location.href.substring(StartDeb,StartFin);
}

 query = window.location.href;
 
 if (Collapse==-1) {
  Deb = query.indexOf('&Expand=');
  ObjetString = "&Expand=";
  lg= ObjetString.length;
 }
 else {
  Deb = query.indexOf('&Collapse=');
  ObjetString = "&Collapse=";
  lg= ObjetString.length;
 }
 
 Fin = query.lastIndexOf('#');
 CategOuverte = query.substring(Fin+1);
 var posChap = query.lastIndexOf('=');
 Chap = ( posChap == -1 ) ? '' : query.substring(posChap+1);
 IndiceCateg = Chap.indexOf('.');
 Categ = Chap.slice(0, IndiceCateg);

offset = ' ';
dotNumber = docNumber.split('.');
for (o=1;o<=dotNumber.length;o++)
{
offset += "&nbsp;&nbsp;&nbsp;"
}

 
if (window.location.href.indexOf('&ExpandView')==-1) {
  // Traitement des sous catégories (1.2,...1.2.2,...1.2.2.2)
  if (Chap.indexOf(docNumber)==0) {
    if (Collapse==-1) {
      html=offset+img2+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Collapse="+docNumber+"#"+docNumber+"'\">";
    } else {
   if (docNumber==CategOuverte) {
         html=offset+img1+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Expand="+docNumber+"#"+docNumber+"'\">";
   } else {
         html=offset+img2+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Collapse="+docNumber+"#"+docNumber+"'\">";
   }
    }
  }
  else {
     // Traitement de la categorie 1er niveau (1, 2, 3, .....)
    if (docNumber==CategOuverte) {
      if (Collapse==-1) {
        html=offset+img2+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Collapse="+docNumber+"#"+docNumber+"'\">";
      }
    else {
        html=offset+img1+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Expand="+docNumber+"#"+docNumber+"'\">";
      }
    }
    else {
      html=offset+img1+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Expand="+docNumber+"#"+docNumber+"'\">";
    }
  }
} else {
html=offset+img2+" OnClick=\"location='<Valeur calculée>?OpenView"+ Start +"&Collapse="+docNumber+"#"+docNumber+"'\">";
}
document.write(html);
}
</script>

Et voila, vous savez maintenant faire une vue catégorisée avec l'image de votre choix pour plier déplier et indentée jusqu'au bout.

Attention, ce code marche mal sur une vue intégrée restreinte sur une catégorie. Une solution au souci est recherchée.

alternative :
du temps de la version 4, il y a quelques années, il me semble avoir vu un code lancé sur le OnLoad pour remplacer dynamiquement les images collapse.gif et expand.gif par d'autres

@Roubech: oui, il y a bien un code à lancer sur le onLoad pour changer les images. Seulement c'est miteux parce que tu vois apparaitre les twisties verts puis tes images
La solution de Buggy évite cet effet.

Sinon, en v7, il y a possibilité de changer les twisties dans la colonne mais je ne sais pas si ça fonctionne en web