treegrid en html/javascript

treegrid en html/javascript - HTML/CSS - Programmation

Marsh Posté le 30-07-2006 à 21:53:18    

Bonjour,
Presque tout est dans le titre. Je cherche à réaliser un treegrid (encore appelé treelistview) du genre de http://scbr.com/docs/products/dhtm [...] ndex.shtml mais en beaucoup plus simple.  
Le problème c'est bien qu'ayant les bases en programmation web, je ne vois pas du tout par où commencer ....
 
Tout avis ou piste est el bienvenue
 
Merci par avance.  :hello:

Message cité 1 fois
Reply

Marsh Posté le 30-07-2006 à 21:53:18   

Reply

Marsh Posté le 31-07-2006 à 08:13:09    

Lamarmotte a écrit :

Bonjour,
Presque tout est dans le titre. Je cherche à réaliser un treegrid (encore appelé treelistview) du genre de http://scbr.com/docs/products/dhtm [...] ndex.shtml mais en beaucoup plus simple.  
Le problème c'est bien qu'ayant les bases en programmation web, je ne vois pas du tout par où commencer ....
 
Tout avis ou piste est el bienvenue
 
Merci par avance.  :hello:


 
Lesquelles ?
 
Sinon, ben, je vois pas trop ce qu'on peut te dire. [:spamafote]
 
tu fais d'abord la partie HTML en dur, puis une fois que tu es content du résultat, tu la recrée via JS et le DOM ou avec innerHTML, et enfin tu construis la prog en JS. C'est ça que tu veux savoir ?
 
 

Reply

Marsh Posté le 31-07-2006 à 10:26:03    

Allez tiens cadeau, j'en avais fait y'a pas longtemps.
T'as plus qu'a tout stylé comme tu veux en css:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   /*** param is a node which has been clicked ***/
  9.   function show(lnkNode){
  10.     var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  11.     if ( sonsNode.length >= 1 && sonsNode[1].tagName == 'UL' && sonsNode[1].className == "disp" ){
  12.       sonsNode[1].className = "";
  13.       lnkNode.parentNode.className = "";
  14.     } else {
  15.       sonsNode[1].className = "disp";
  16.       lnkNode.parentNode.className = "disp";
  17.     }
  18.     return false;
  19.   }
  20.   </script>
  21.   <style type="text/css">
  22.   ul{
  23.     display: none;
  24.   }
  25.   ul.disp{
  26.     display: block;
  27.   }
  28.   </style>
  29. </head>
  30. <body >
  31.    <ul class="disp">
  33.      <li>
  34.        <a href="nojs.html" onclick="return show(this)">Truc 1:</a>
  35.        <ul>
  36.          <li>Truc 1_1</li>
  37.          <li>Truc 1_2</li>
  38.          <li>
  39.    <a href="nojs.html" onclick="return show(this)">Truc 1_3:</a>
  41.    <ul>
  42.              <li>Truc 1_3_1</li>
  43.              <li>Truc 1_3_2</li>
  44.              <li>Truc 1_3_3</li>
  45.              <li>Truc 1_3_4</li>
  46.      <li>
  47.                <a href="nojs.html" onclick="return show(this)">Truc 1_3_5:</a>
  49.        <ul>
  50.                  <li>Truc 1_3_5_1</li>
  51.                  <li>Truc 1_3_5_2</li>
  52.                  <li>Truc 1_3_5_3</li>
  53.                  <li>Truc 1_3_5_4</li>
  54.        </ul>
  55.      </li>
  57.    </ul>
  58.  </li>
  59.        </ul>
  60.      </li>
  61.      <li>
  62.        <a href="nojs.html" onclick="return show(this)">Truc 2:</a>
  63.        <ul>
  64.          <li>Truc 2_1</li>
  66.          <li>Truc 2_2</li>
  67.          <li>
  68.    <a href="nojs.html" onclick="return show(this)">Truc 2_2_3</a>
  69.    <ul>
  70.              <li>Truc 2_2_3_1</li>
  71.              <li>Truc 2_2_3_2</li>
  72.              <li>Truc 2_2_3_3</li>
  74.    </ul>
  75.  </li>
  76.        </ul>
  77.      </li>
  78.    </ul>
  79. </body>
  80. </html>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed