[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree Grid Extension guide and samples</title>
   6  </head>
   7  
   8  <body>
   9  
  10  <div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a>&nbsp;<a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div>
  11  <script>
  12  	function openFull(el){
  13          el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
  14      }
  15  	function expandAll(fl){
  16          var elAr = document.getElementsByTagName("DIV");
  17          for(var i=2;i<elAr.length;i++){
  18              if(elAr[i].className=='block'){
  19                  if(fl)
  20                      elAr[i].style.display = "";
  21                  else
  22                      elAr[i].style.display = "none";
  23              }
  24          }
  25      }
  26  </script>
  27  <style>
  28      body {font-size:14px;line-height:18px;}
  29      .{font-family:arial;}
  30      h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
  31      h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
  32      h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
  33      .op {cursor:pointer;}
  34      div.block {margin-left:30px;}
  35      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  36      li {margin-top:2px;}
  37  </style>
  38  <h2 onclick="openFull(this)">dhtmlXTreeGrid Guide and Samples</h2>
  39  <div class="block">
  40  <!---  --->
  41      
  42      <h3 onclick="openFull(this)">Main features</h3
  43      ><div style="display:show" class="block">
  44          <li>Multibrowser/Multiplatform support </li>
  45          <li>Full controll with JavaScript</li>
  46          <li>Dynamic loading</li>
  47          <li>XML support</li>
  48          <li>drag-&-drop (within one treegrid, between treegrids) </li>
  49          <li>checkboxes (two/three states)</li> 
  50          <li>customizable icons (with javascript or xml) </li>
  51          <li>user data for nodes</li>
  52          <li>high stability</li>
  53          <li>Macromedia Cold Fusion support</li>
  54      </div>
  55      
  56      <h3 onclick="openFull(this)">Supported browsers</h3
  57      ><div style="display:show" class="block">
  58          <li>IE 5.x and above</li>
  59          <li>Mac OS X Safari</li>
  60          <li>Mozilla 1.4 and above</li>
  61          <li>FireFox 0.9 and above</li>
  62          <li>Opera (Xml loading depends on browser version)</li>
  63      </div>
  64  
  65      <h3 onclick="openFull(this)">Working with dhtmlXTreeGrid</h3
  66      ><div style="display:show" class="block">
  67  <!--- Initialize object on page --->
  68          <h4 onclick="openFull(this)">Initialize object on page</h4
  69          ><div style="display:none" class="block">
  70  <XMP>
  71  <div id="treeBox" style="width:200;height:200"></div>
  72  <script>
  73      treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0);
  74      tree.setImagePath("gfx/");
  75      tree.enableCheckBoxes(false);
  76  </script>
  77  </XMP>
  78          Parameters passed to the constructor are:
  79              <li>object to attach treegrid to (should be loaded before calling constructor)</li>
  80              <li>width of the treegrid</li>
  81              <li>height of the treegrid</li>
  82              <li>identifier of level parent to treegrid root level</li><br>
  83          Specify Additional parameters of the treegrid:
  84              <li>setImagePath(url) - method specifies the path to the folder with treegrid icons</li>
  85              <li>enableCheckBoxes(mode) - enable/disable checkboxes in treegrid (checkboxes appear by default)</li>
  86          </div>
  87  <!--- Set Additional init parameters --->    
  88          <h4 onclick="openFull(this)">Set Event Handlers</h4
  89          ><div style="display:none" class="block">
  90  <XMP>
  91  <div id="treeBox" style="width:200;height:200"></div>
  92  <script>
  93      treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0);
  94      ...
  95      treegrid.tree.setOnDragHandler(onDrop);//set function object to call on drop
  96      treegrid.tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
  97      treegrid.tree.setOnOpenHandler(onOpen,state);//set function to call on open/close node
  98      treegrid.tree.setOnDblClickHandler(onDblClick);//set function to call on dbl click
  99  </script>
 100  </XMP>    
 101          <li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
 102          <li>Dropped node ID and new parent node ID  will be passed to function specified as argument for setDragFunction(funcObj)</li>
 103          <li>node ID and node state will be passed to the function specified as argument for setOpenAction(funcObj,state)</li>
 104          <li>node ID will be passed to the function specified as argument for setDblClickAction(funcObj)</li>
 105          </div>
 106  <!--- Adding nodes with Script --->
 107          <h4 onclick="openFull(this)">Adding nodes with Script</h4
 108          ><div style="display:none" class="block">
 109  <XMP>
 110  <script>
 111      tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
 112      ...
 113      tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED"));
 114      tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED"));
 115  </script>
 116  </XMP>    
 117          <li>0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them</li>
 118          <li>Last argument is a comma delimited string of following possible value (upper case only):</li>
 119              <li type="circle">SELECT - move selection to this node after inserting</li>
 120              <li type="circle">CALL - call function on select</li>
 121              <li type="circle">TOP - add node to the top position </li>
 122              <li type="circle">CHILD - node has children</li>
 123              <li type="circle">CHECKED - checkbox is checked (if exists)</li>
 124          </div>
 125  <!--- Using XML --->
 126          <h4 onclick="openFull(this)">Loading data with XML</h4
 127          ><div style="display:none" class="block">
 128  <XMP>
 129  <script>
 130      tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
 131      tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
 132      tree.loadXML();//load root level from xml
 133  </script>
 134  </XMP>    
 135          <li>ID of opened node (as id url parameter) will be added to URL specified in  initXMLAutoLoading(url) during the call</li>
 136          <li>No additional ID is added to the url specified in loadXML(url) method during the call</li>
 137          <li>Using loadXML() without parameters you load url specified in initXMLAutoLoading(url) method</li>
 138  <XMP>
 139  XML Syntax:
 140  <?xml version='1.0' encoding='iso-8859-1'?>
 141  <tree id="0">
 142      <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
 143          <userdata name="system">true</userdata>
 144          <item text="Floppy (A:)" id="11" child="0"  im0="flop.gif" im1="flop.gif" im2="flop.gif"/>
 145          <item text="Local Disk (C:)" id="12" child="0"  im0="drv.gif" im1="drv.gif" im2="drv.gif"/>
 146      </item>
 147      <item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/>
 148  </tree>
 149  </XMP>    
 150          <strong>&lt;tree&gt;</strong> node is mandatory. It specifies the parent of loading block of data. According to this its id parameter specifies the ID oth that parent. 
 151          To load root level you need to specify the ID you used when created tree object: new myObjTree(boxObject,width,height,<b>0</b>) <br>
 152          
 153          <strong>&lt;item&gt;</strong> can contain subitems (in order to load more than one level at once) or not.<br>
 154          Mandatory parameters for this tag are:<br>
 155              <li>text - label of the node</li>
 156              <li>id - id of the node</li>
 157          Optional parameters for this tag are:<br>
 158              <li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
 159              <li>im1 - image for opened node with children</li>
 160              <li>im2 - image for closed node with children</li>
 161              <!--- <li>top - </li> --->
 162              <li>select - select node on load (0/1)</li>
 163              <li>call - call function on select(0/1)</li>
 164              <li>checked - check checkbox if exists(0/1)</li>
 165              <li>child - spec. if node has children (1) or not (0)</li><br>
 166          To set userdata directly within XML use <strong>&lt;userdata&gt;</strong><br>
 167          It has just one parameter: <br>
 168              <li>name</li><br>
 169          and value to specify userdata value            
 170          </div>
 171  <!--- Setting custom icons to nodes --->
 172          <h4 onclick="openFull(this)">Setting custom icons to nodes</h4
 173          ><div style="display:none" class="block">
 174              There are two ways to set custom icons for the node. And it depends on the way you add items.<br>
 175              <em>Important:</em> tree will get images for the nodes from the path specified in setImagePath(url) method.<br><br>
 176              
 177              Javascript way. Using arguments of insertNewChild(...) or insertNewNext(...) methods:
 178  <XMP>
 179  <script>
 180      var im0 = "doc.gif";//icon to show if node contains no children
 181      var im1 = "opened.gif";//if node contains children and opened
 182      var im2 = "closed.gif";//if node contains children and closed
 183      tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
 184      tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
 185  </script>
 186  </XMP>    
 187              XML way. Using parameters of &lt;item&gt; tag:
 188  <XMP>
 189  <?xml version='1.0' encoding='iso-8859-1'?>
 190  <tree id="0">
 191      <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
 192  </tree>
 193  </XMP>    
 194              <li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
 195              <li>im1 - image for opened node with children</li>
 196              <li>im2 - image for closed node with children</li>
 197          </div>
 198  <!--- Dynamical loading --->        
 199          <h4 onclick="openFull(this)">Building dynamic tree</h4
 200          ><div style="display:none" class="block">
 201          If your tree should contain large amount of nodes (or you simply do not want to waist time loading hidden nodes), it would be better to load them on demand, not at once. 
 202          For this purpose we made the tree to load levels dynamically using XML.  <br>
 203          See chapter <em>"Loading data with XML"</em>
 204          </div>
 205          
 206          
 207          
 208          <h4 onclick="openFull(this)">Manipulating nodes</h4
 209          ><div style="display:none" class="block">
 210          A few examples of manipulating node with tree object methods:
 211  <XMP>
 212  <script>
 213      tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
 214      ...
 215      var sID = tree.getSelectedItemId();//get id of selected node
 216      tree.setLabel(sID,"New Label");//change label of selecte node
 217      tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
 218      tree.openItem(sID);//expand selected node
 219      tree.closeItem(sID);//close selected node
 220      tree.changeItemId(sID,100);//change id of selected node to 100
 221      alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
 222  </script>
 223  </XMP>    
 224          </div>
 225      </div>
 226      
 227      
 228      
 229      <h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3
 230      ><div style="display:none" class="block">
 231  <XMP>
 232  <cf_dhtmlXTree
 233      name="tree"
 234      width="250"
 235      height="250"
 236      JSPath="../"
 237      CSSPath="../"
 238      iconspath="gfx/"
 239      xmldoc="tree.xml"
 240      checkboxes="false"
 241      dragndrop="true"
 242      style="background-color:whitesmoke;border:1px solid blue;"
 243      onSelect="onNodeSelect"
 244      onDrop="onDropNode">
 245          ...configuration xml...
 246      </cf_dhtmlXTree>
 247  </XMP>
 248      <li>name - [optional] name of the tree js object to use in javascript,  if skiped, then name autogenerated</li>
 249      <li>width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)</li>
 250      <li>height - [optional] height of the tree</li>
 251      <li>JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default</li>
 252      <li>CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default</li>
 253      <li>iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default</li>
 254      <li>xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically</li>
 255      <li>checkboxes - [optional] show checkboxes (none, twoState, threeState)</li>
 256      <li>dragndrop - [optional] activate drag-&-drop (true,false)</li>
 257      <li>style - [optional] style for the tree box</li>
 258      <li>onSelect - [optional] javascript function to call on node selection</li>
 259      <li>oncheck - [optional] javascript function to call on node (un)checking</li>
 260      <li>onDrop - [optional] javascript function to call on node drop</li>
 261      <li>im1 - [optional] default image used for child nodes</li>
 262      <li>im2 - [optional] default image used for opened branches</li>
 263      <li>im3 - [optional] default image used for closed branches</li>            
 264      <br>
 265      For description of optional configuration xml - see chapter <em>"Loading data with XML"</em>
 266      <br><br>
 267  Minimal possible tag syntax with on-page xml:
 268  <XMP>
 269  <cf_dhtmlXTree> 
 270      <item text="Top node" id="t1" >
 271          <item text="Child node 1" id="c1" ></item>
 272          <item text="Child node 2" id="c2" ></item>
 273      </item>
 274  </cf_dhtmlXTree>    
 275  </XMP>
 276  Minimal possible tag syntax with server-side xml:
 277  <XMP>
 278  <cf_dhtmlXTree     xmldoc="tree.xml">
 279  </cf_dhtmlXTree>
 280  </XMP>
 281  With images specified:
 282  <XMP>
 283  <cf_dhtmlXTree  
 284      im1="book.gif" 
 285      im2="books_open.gif" 
 286      im3="books_close.gif">
 287      <item text="Mystery " id="mystery"  open="yes" >
 288          <item text="Lawrence Block" id="lb" >
 289              <item text="All the Flowers Are Dying" id="lb_1" />
 290              <item text="The Burglar on the Prowl" id="lb_2" />
 291              <item text="The Plot Thickens" id="lb_3" />
 292              <item text="Grifters Game" id="lb_4" />
 293              <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
 294          </item>
 295          <item text="Robert Crais" id="rc" >
 296              <item text="The Forgotten Man" id="rc_1" />
 297              <item text="Stalking the Angel" id="rc_2" />
 298              <item text="Free Fall" id="rc_3" />
 299              <item text="Sunset Express" id="rc_4" />
 300              <item text="Hostage" id="rc_5" />
 301          </item>
 302          <item text="Ian Rankin" id="ir" ></item>
 303          <item text="James Patterson" id="jp" ></item>
 304          <item text="Nancy Atherton" id="na" ></item>
 305      </item>
 306  </cf_dhtmlXTree>
 307  </XMP>
 308  With Events Handlers,Checkboxes and Drag-n-drop:
 309  <XMP>
 310  <cf_dhtmlXTree   
 311      dragndrop="true"  
 312      checkboxes="twoState" 
 313      onSelect="onClick" 
 314      onCheck="onCheck" 
 315      onDrop="onDrag">
 316          <item text="Mystery " id="mystery"  open="yes" >
 317              <item text="Lawrence Block" id="lb" >
 318                  <item text="All the Flowers Are Dying" id="lb_1" />
 319                  <item text="The Burglar on the Prowl" id="lb_2" />
 320                  <item text="The Plot Thickens" id="lb_3" />
 321                  <item text="Grifters Game" id="lb_4" />
 322                  <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
 323              </item>
 324              <item text="Robert Crais" id="rc" >
 325                  <item text="The Forgotten Man" id="rc_1" />
 326                  <item text="Stalking the Angel" id="rc_2" />
 327                  <item text="Free Fall" id="rc_3" />
 328                  <item text="Sunset Express" id="rc_4" />
 329                  <item text="Hostage" id="rc_5" />
 330              </item>
 331              <item text="Ian Rankin" id="ir" ></item>
 332              <item text="James Patterson" id="jp" ></item>
 333              <item text="Nancy Atherton" id="na" ></item>
 334          </item>
 335  </cf_dhtmlXTree>
 336  </XMP>
 337      </div>
 338  
 339  
 340  </div>
 341  </body>
 342  </html>