[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree samples. dhtmlXTree - Collapse/Expand</title>
   6  </head>
   7  <style>
   8      body {font-size:12px}
   9      .{font-family:arial;font-size:12px}
  10      h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  11      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  12  </style>
  13  <body>
  14      <h1>Collapse/Expand</h1>
  15      <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
  16      <script  src="../js/dhtmlXCommon.js"></script>
  17      <script  src="../js/dhtmlXTree.js"></script>        
  18      <script>
  19  		function closeAllRoots(){
  20              var rootsAr = tree.getSubItems(0).split(",")
  21              for(var i=0;i<rootsAr.length;i++){
  22                  tree.closeAllItems(rootsAr[i])
  23              }
  24          }
  25      </script>
  26      <table>
  27          <tr>
  28              <td valign="top">
  29  
  30  
  31                  <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
  32              </td>
  33              <td rowspan="2" style="padding-left:25" valign="top">
  34              
  35              
  36              <a href="javascript:void(0);" onclick="tree.openAllItems(0);">Expand all</a><br><br>
  37              <a href="javascript:void(0);" onclick="tree.closeAllItems(0);">Collapse all</a><br><br>
  38              <a href="javascript:void(0);" onclick="tree.closeItem(tree.getSelectedItemId());">Close selected item</a><br><br>
  39              <a href="javascript:void(0);" onclick="tree.openItem(tree.getSelectedItemId());">Open selected item</a><br><br>            
  40              <a href="javascript:void(0);" onclick="tree.closeAllItems(tree.getSelectedItemId());">Collapse selected branch</a><br><br>
  41              <a href="javascript:void(0);" onclick="tree.openAllItems(tree.getSelectedItemId());">Expand selected branch</a><br><br>
  42  
  43              </td>
  44          </tr>
  45          <tr>
  46              <td>&nbsp;</td>
  47          </tr>
  48      </table>
  49      <hr>    
  50  <XMP>
  51  <div id="treeboxbox_tree" style="width:200;height:200"></div>
  52  <script>
  53              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  54              tree.setImagePath("../imgs/");
  55              tree.loadXML("tree.xml");
  56              
  57              ....
  58              //expand all
  59              tree.openAllItems(0);
  60              //open item
  61              tree.openItem(id);
  62              //close item
  63              tree.closeItem(id);
  64              //open branch
  65              tree.openAllItems(id);
  66              //close branch
  67              tree.closeAllItems(id);                                    
  68  </script>
  69  </XMP>    
  70  
  71      <script>
  72              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  73              tree.setImagePath("../imgs/");
  74              tree.loadXML("tree3.xml");
  75  
  76      </script>
  77  <br><br>
  78  
  79  </body>
  80  </html>