Code Zone :: By Charitha Ranasingha: Tree View Generate - Recursive Function , Any number of depth

<?php
  $connect = mysql_connect("localhost", "root", "");
  mysql_select_db("test");
  $nav_query = mysql_query("SELECT * FROM `nodes` ORDER BY `id`");
  $tree = ""; // Clear the directory tree
  $depth = 10; // Child level depth.
  $top_level_on = 1; // What top-level category are we on?
  $exclude = array(); // Define the exclusion array
  array_push($exclude, 0); // Put a starting value in it
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Folder tree with Drag and Drop capabilities</title>
  <script type="text/javascript" src="js/ajax.js"></script>
  <script type="text/javascript" src="js/context-menu.js"></script>
  <script type="text/javascript" src="js/drag-drop-folder-tree.js">

/************************************************************************************************************
  (C) www.dhtmlgoodies.com, July 2006

  Update log:

  This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

  Terms of use:
  You are free to use this script as long as the copyright message is kept intact.

  For more detailed license information, see http://www.dhtmlgoodies.com/index.html?page=termsOfUse

  Thank you!

  www.dhtmlgoodies.com
  Alf Magne Kalleland

  ************************************************************************************************************/
  </script>
  <link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link>
  <link rel="stylesheet" href="css/context-menu.css" type="text/css"></link>
  <style type="text/css">
  /* CSS for the demo */
  img{
  border:0px;
  }
  </style>
  <script type="text/javascript">
  //--------------------------------
  // Save functions
  //--------------------------------
  var ajaxObjects = new Array();

  // Use something like this if you want to save data by Ajax.
  function saveMyTree()
  {
  saveString = treeObj.getNodeOrders();
  var ajaxIndex = ajaxObjects.length;
  ajaxObjects[ajaxIndex] = new sack();
  var url = 'saveNodes.php?saveString=' + saveString;
  ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
  ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ; // Specify function that will be executed after file has been found
  ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function

  }
  function saveComplete(index)
  {
  alert(ajaxObjects[index].response);
  }

  // Call this function if you want to save it by a form.
  function saveMyTree_byForm()
  {
  document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
  document.myForm.submit();
  }

</script>

  </head>
  <body>

  <?php
  while ( $nav_row = mysql_fetch_array($nav_query) )
  {
  $goOn = 1; // Resets variable to allow us to continue building out the tree.
  for($x = 0; $x < count($exclude); $x++ ) // Check to see if the new item has been used
  {
  if ( $exclude[$x] == $nav_row['id'] )
  {
  $goOn = 0;
  break; // Stop looking b/c we already found that it's in the exclusion list and we can't continue to process this node
  }
  }
  if ( $goOn == 1 )
  {

  $tree .= "<ul id='dhtmlgoodies_tree2' class='dhtmlgoodies_tree'><li id='node0' noDrag='true' noSiblings='true' noDelete='true' noRename='true'><a href='#'>".$nav_row['name']."</a>"; // Process the main tree node
  array_push($exclude, $nav_row['id']); // Add to the exclusion list
  if ( $nav_row['id'] < 50 )
  { $top_level_on = $nav_row['id']; }

  $tree .= build_child($nav_row['id']); // Start the recursive function of building the child tree
  }
  }

  function build_child($oldID) // Recursive function to get all of the children...unlimited depth
  {
  global $exclude, $depth; // Refer to the global array defined at the top of this script
  $child_query = mysql_query("SELECT * FROM `nodes` WHERE pid=" . $oldID);

  $available = mysql_num_rows($child_query);

  $i = 1 ;

  if($available > 0)
  $tempTree .= "<ul>";

  while ( $child = mysql_fetch_array($child_query) )
  {
  if ( $child['id'] != $child['pid'] )
  {
  for ( $c=0;$c<$depth;$c++ ) // Indent over so that there is distinction between levels
  { }

$tempTree .= "<li id='node".$child['id']."' ><a href='#'>".$child['name']."</a>";

  $depth++; // Incriment depth b/c we're building this child's child tree (complicated yet???)
  $tempTree .= build_child($child['id']); // Add to the temporary local tree
  $tempTree .= "</li>";
  $depth--; // Decrement depth b/c we're done building the child's child tree.
  array_push($exclude, $child['id']);// Add the item to the exclusion list
  }

  $i = $i + 1;
  }

if($available > 0)
  $tempTree .= "</ul>";

  return $tempTree; // Return the entire child tree
  }

  echo $tree."</li></ul>";

  ?>

  <form>
  <input type="button" onclick="saveMyTree()" value="Save">
  </Form>
  <script type="text/javascript">
  treeObj = new JSDragDropTree();
  treeObj.setTreeId('dhtmlgoodies_tree2');
  treeObj.setMaximumDepth(7);
  treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you to show a message when maximum depth is reached, i.e. on drop.
  treeObj.initTree();
  treeObj.expandAll();

  </script>
  <a href="#" onclick="treeObj.collapseAll()">Collapse all</a> |
  <a href="#" onclick="treeObj.expandAll()">Expand all</a>
  <p style="margin:10px">Use your mouse to drag and drop the nodes. Use the "Save" button to save your changes. The new structure will be sent to the server by use of Ajax(Asynchron XML and Javascript). </p>
  <p style="margin:10px"><b><i>Note!</i></b> I'm not saving the structure in this demo in order to make the script look the same for all visitors</p>

  
  <form name="myForm" method="post" action="saveNodes.php">
  <input type="hidden" name="saveString">
  </form>

</body>
  </html>

Code Zone :: By Charitha Ranasingha

Pages

Thursday, March 3, 2011

Tree View Generate - Recursive Function , Any number of depth

No comments:

Post a Comment