[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2  <html>
   3  <head>
   4      <title>dhtmlxTree sample</title>
   5      <style>
   6          #details span{
   7              font-size:10px;
   8              font-family:arial;
   9              display:block;
  10          }
  11          #details input,#details textarea{
  12              border: 1px solid gray;
  13          }
  14          #actions a{
  15              font-size:12px;
  16              font-family:arial;
  17              margin:5px;
  18              text-decoration:none;
  19          }
  20          #actions {
  21              border-bottom:1px solid blue;
  22              padding:2px;
  23              margin-bottom:10px;
  24              margin-top:10px;
  25          }
  26          #showproc{
  27              border:1px solid;
  28              border-color: lightblue blue blue lightblue;
  29              background-color: #87ceeb;
  30              font-family:arial;
  31              font-size: 14px;
  32              padding: 5px;
  33              position: absolute;
  34              top:100px;
  35              left:600px;
  36          }
  37      </style>
  38      <link rel="STYLESHEET" type="text/css" href="../../css/dhtmlXTree.css">
  39      <script  src="../../js/dhtmlXCommon.js"></script>
  40      <script  src="../../js/dhtmlXTree.js"></script>    
  41      
  42      <script>
  43          //tree object
  44          var tree;
  45          //xml loader to load details from database
  46          var xmlLoader = new dtmlXMLLoaderObject(doLoadDetails,window);
  47          //default label for new item
  48          var newItemLabel = "New Item";
  49          //id for new (unsaved) item
  50          var newItemId = "-1";
  51          
  52          //load tree on page
  53  		function loadTree(){
  54              tree = new dhtmlXTreeObject("treebox","100%","100%",0);
  55              tree.setImagePath("../../imgs/");
  56              tree.enableDragAndDrop(true);
  57              tree.setDragHandler(doOnBeforeDrop);
  58              tree.setOnClickHandler(doOnSelect);
  59              tree.loadXML("treefromdb.php");
  60              status();
  61          }
  62          
  63          //add new node next to currently selected (or the first in tree)
  64  		function addNewPeer(){
  65              if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
  66                  alert("New Item (unsaved) already exists")
  67                  return false;
  68              }
  69              var selectedId = tree.getSelectedItemId();
  70              if(selectedId!=""){
  71                  tree.insertNewNext(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
  72              }else{
  73                  tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
  74              }
  75          }
  76          
  77          //add new child node to selected item (or the first item in tree)
  78  		function addNewChild(){
  79              if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
  80                  alert("New Item (unsaved) already exists")
  81                  return false;
  82              }
  83              var selectedId = tree.getSelectedItemId();
  84              if(selectedId!=""){
  85                  tree.insertNewItem(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
  86              }else{
  87                  tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
  88              }
  89          }
  90          
  91          //delete item (from database)
  92  		function deleteNode(){
  93              status(true);
  94              var f = document.forms["detailsForm"];
  95              if(tree.getSelectedItemId()!=newItemId){//delete node from db
  96                  if(!confirm("Are you sure you want to delete selected node?"))
  97                      return false;
  98                  f.action = "deletenode.php"
  99                  f.submit()
 100              }else{//delete unsaved node
 101                  doDeleteTreeItem(newItemId);
 102              }
 103          }
 104          
 105          //remove item from tree
 106  		function doDeleteTreeItem(id){
 107              document.getElementById("details").style.visibility = "hidden";
 108              var pId = tree.getParentId(id);
 109              tree.deleteItem(id);
 110              if(pId!="0")
 111                  tree.selectItem(pId,true);
 112              status();
 113          }
 114          
 115          //save item
 116  		function saveItem(){
 117              status(true);
 118              var f = document.forms["detailsForm"];
 119              f.action = "savenode.php";
 120              f.submit();
 121          }
 122          
 123          //save moved (droped) item to db. Cancel drop if save failed or item is new
 124  		function doOnBeforeDrop(id,parentId){
 125              if(id==newItemId)
 126                  return false;
 127              else{
 128                  status(true);
 129                  var dropSaver = new dtmlXMLLoaderObject(null,null,false);//sync mode
 130                  dropSaver.loadXML("dropprocessor.php?id="+id+"&parent_id="+parentId);
 131                  var root = dropSaver.getXMLTopNode("succeedded");
 132                  var id = root.getAttribute("id");
 133                  if(id==-1){
 134                      alert("Save failed");
 135                      status();
 136                      return false;
 137                  }else{
 138                      if(tree.getSelectedItemId()==id){//update details (really need only parent id)
 139                          loadDetails(id);
 140                      }
 141                  }
 142                  status();
 143                  return true;
 144              }
 145          }
 146          
 147          //update item
 148  		function doUpdateItem(id, label){
 149              var f = document.forms["detailsForm"];
 150              f.item_id.value = id;
 151              tree.changeItemId(tree.getSelectedItemId(),id);
 152              tree.setItemText(id,label);
 153              tree.setItemColor(id,"black","white");
 154              status();
 155          }
 156          
 157          //what to do when item selected
 158  		function doOnSelect(itemId){
 159              if(itemId!=newItemId){
 160                  if(tree.getLevel(newItemId)!=0){
 161                      if(confirm("Do you want to save changes?")){//save changes to new item
 162                          tree.selectItem(newItemId,false)
 163                          saveItem();
 164                          return;
 165                      }
 166                      tree.deleteItem(newItemId);
 167                  }    
 168              }else{//set color to new item label
 169                  tree.setItemColor(itemId,"red","pink")
 170              }
 171              loadDetails(itemId);//load details for selected item
 172          }
 173          //send request to the server to load details
 174  		function loadDetails(id){
 175              status(true);
 176              xmlLoader.loadXML("loaddetails.php?id="+id);
 177          }
 178          //populate form of details
 179  		function doLoadDetails(obj){
 180              var f = document.forms["detailsForm"];
 181              var root = xmlLoader.getXMLTopNode("details")
 182              var id = root.getAttribute("id");
 183              document.getElementById("details").style.visibility = "visible";
 184              if(id==newItemId){
 185                  f.item_nm.value = tree.getItemText(id);
 186                  f.item_desc.value = "";
 187              }else{
 188                  f.item_nm.value = root.getElementsByTagName("name")[0].firstChild.nodeValue;
 189                  if(root.getElementsByTagName("desc")[0].firstChild!=null)
 190                      f.item_desc.value = root.getElementsByTagName("desc")[0].firstChild.nodeValue;
 191                  else
 192                      f.item_desc.value = "";
 193              }
 194              f.item_id.value = id
 195              f.item_parent_id.value = tree.getParentId(id);
 196              status();
 197          }
 198          
 199          //show status of request on page
 200  		function status(fl){
 201              var d = document.getElementById("showproc");
 202              if(fl)
 203                  d.style.display = "";
 204              else
 205                  d.style.display = "none";
 206          }
 207      </script>    
 208  </head>
 209  
 210  <body onload="loadTree()" style="height:100%">
 211      <!--- block for displaying status of request on page --->
 212      <div id="showproc" style="display:block;">Processing...</div>
 213      
 214      <h1>dhtmlxTree<br>Relationships with database sample (PHP/MySQL)</h1>
 215      <a href="../dhtmlxTree_db_sample.zip">Get zipped code</a>
 216      <br><br>
 217      <li>Create/Update/Delete nodes in tree with simultaneous database update</li>
 218      <li>Drag-n-drop with simultaneous database update</li>
 219      
 220      
 221      <div id="actions">
 222          <a href="javascript:void(0)" onclick="addNewPeer()">New Peer</a>|<a href="javascript:void(0)" onclick="addNewChild()">New Child</a>|<a href="javascript:void(0)" onclick="deleteNode()">Delete Node</a>
 223      </div>
 224      <table width="100%">
 225          <tr>
 226              <!--- tree area --->
 227              <td width="250px">
 228                  <div id="treebox" 
 229                      style="    width:250px; 
 230                              height:250px;
 231                              background-color:#f5f5f5;
 232                              border :1px solid Silver;"/>
 233              </td>
 234              <!--- details area. visible if any node selected --->
 235              <td id="details" 
 236                  style="padding:5px;visibility:hidden;" valign="top">
 237                      <form name="detailsForm" action="" target="actionframe" method="post">
 238                          <span>Node ID:</span>
 239                          <input  name="item_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
 240                          <span>Parent ID:</span>
 241                          <input  name="item_parent_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
 242                          <span>Label:</span>
 243                          <input name="item_nm" type="Text" maxlength="50" name="label" style="width:200px;"><br>
 244                          <span>Descripton:</span>
 245                          <textarea name="item_desc" id="textarea" style="height:100px;width:200px;"></textarea><br>    
 246                          <button type="button" onclick="saveItem()" style="width:200px;">Save</button>
 247                      </form>
 248              </td>
 249          </tr>
 250      </table>
 251      <!--- iframe for submiting details form to --->
 252      <iframe name="actionframe" id="actionframe" frameborder="0" width="100%" height="0"></iframe>
 253      
 254      <h4>&copy; Scand LLC 2005</h4>    
 255  
 256  
 257  </body>
 258  </html>