[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree samples. dhtmlXTree - Add / Delete items</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>Add / Delete items</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 fixImage(id){
  20              switch(tree.getLevel(id)){
  21              case 1:
  22              tree.setItemImage2(id,'books_close.gif','tombs.gif','tombs.gif');
  23                  break;
  24              case 2:
  25              tree.setItemImage2(id,'book.gif','books_open.gif','books_close.gif');            
  26                  break;
  27              case 3:
  28              tree.setItemImage2(id,'book.gif','books_open.gif','book.gif');            
  29                  break;            
  30              default:
  31              tree.setItemImage2(id,'book_titel.gif','book_titel.gif','book_titel.gif');            
  32                  break;
  33              }
  34          }
  35      </script>
  36      <table>
  37          <tr>
  38              <td valign="top">
  39  
  40  
  41                  <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
  42              </td>
  43              <td rowspan="2" style="padding-left:25" valign="top">
  44              
  45              
  46              <a href="javascript:void(0);" onclick="var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">Insert new child item</a> Item label <input type="text" value="New item" id="ed1"><br><br>
  47              
  48              <a href="javascript:void(0);" onclick="var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed2').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">Insert new item next</a> Item label <input type="text" value="New item" id="ed2"><br><br>
  49              
  50              <a href="javascript:void(0);" onclick="tree.deleteItem(tree.getSelectedItemId(),true);">Delete item</a><br><br>
  51              
  52  
  53              
  54              </td>
  55          </tr>
  56          <tr>
  57              <td>&nbsp;</td>
  58          </tr>
  59      </table>
  60      <hr>
  61              
  62  <XMP>
  63  <div id="treeboxbox_tree" style="width:200;height:200"></div>
  64  <script>
  65      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  66          tree.setImagePath("../imgs/");
  67          tree.loadXML("tree.xml")
  68          
  69          tree.insertNewItem(0,100,"New Node 1",0,0,0,0,"SELECT");
  70          tree.insertNewNext(2,101,"New Node 2",0,0,0,0,"");
  71          tree.deleteItem("2");
  72  </script>
  73  </XMP>    
  74          <li>0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them</li>
  75          <li>Last argument is a comma delimited string of following possible value (upper case only):</li>
  76              <li type="circle">SELECT - move selection to this node after inserting</li>
  77              <li type="circle">CALL - call function on select</li>
  78              <li type="circle">TOP - add node to the top position </li>
  79              <li type="circle">CHILD - node has children</li>
  80              <li type="circle">CHECKED - checkbox is checked (if exists)</li>
  81      <script>
  82              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  83              tree.setImagePath("../imgs/");
  84              tree.loadXML("tree3.xml");
  85  
  86  /*        
  87              
  88              tree.insertNewItem(1,100,"New Node 1",0,0,0,0,"SELECT");
  89              tree.insertNewNext(2,101,"New Node 2",0,0,0,0,"");
  90              tree.deleteItem("2");*/
  91      </script>
  92  <br><br>
  93  
  94  </body>
  95  </html>