hello friends , i need a help to create a binary tree using PHP and mysql. Friends i able to create a tree which is start form parentID with 0 successfully , but when i try to create tree with parent ID=1 , this time i just getting all the child member tree but Root Node OR Parent Node is not getting . So i want to show parent node also ....please help me...
my Index file where i m displaying the tree
[CODE]
<!DOCTYPE html>
<html>
<head>
<title>Tree-view Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="TreeView.js"></script>
<script type="text/javascript">
$(document).ready(function(){
TreeView.drawAll();
});
</script>
</head>
<body bgcolor="red">
<table width="100%"><tr><td><center>
<?php
ini_set('display_errors', true);
error_reporting(E_ALL);
include("TreeView.inc");
$dbLink = new mysqli("localhost", "root", "", "tree");
$treeView = new TreeView($dbLink);
$treeView->printTree('treeview');
$dbLink->close();
?><!-- below code is for collecting the memmber id in arrary by level --><!--<div style="clear: both;">
<pre><?php print_r($treeView->levels); ?></pre>
</div>
--></center></td></Tr></table>
</body>
</html>
[/CODE]
treeview.inc file , logic of php for creating the tree
[CODE]<?php
class TreeView
{
private $bgColor ="white";
private $dbLink;
private $tblName;
public $levels;
public $TreeView_DivID=0;
public function __construct(mysqli $dbLink)
{
if($dbLink != null && $dbLink->connect_errno == 0)
{
$this->dbLink = $dbLink;
if(!isset($GLOBALS["TreeView_DivID"]))
{
$GLOBALS["TreeView_DivID"]=0;
}
}
else
{
throw new Exception("The mysqli object provided is invalid.");
}
}
public function createTree($tblName)
{
if(!isset($tblName) || empty($tblName))
{
throw new Exception("Failed to create the tree. Table or database information is invalid");
}
else
{
$this->tblName = $tblName;
$treeData = array();
$output = "";
$this->fetchTree($treeData);
$divID = "TreeView_ContainerDiv_" . $GLOBALS["TreeView_DivID"];
$output = <<<HTML
<style type="text/css">
div#{$divID} { margin: 0; padding: 0; text-align: center; color:white;}
div#{$divID} div { margin: 0; padding: 0 5px; float: left;}
div#{$divID} p { margin: 0; padding: 0; margin-bottom: 10px;color:white;background-image:url('abc.jpg'); height:50px;width:50px; text-align: center}
</style>
<div id="{$divID}" align="center">
<div id="{$divID}_Inner" align="center">
HTML;
$this->buildHtml($treeData, $output);
$rootID = array_keys($treeData);
$rootID = $rootID[0];
$output .= <<<HTML
</div>
<script type="text/javascript">
TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
</script>
</div>
HTML;
$GLOBALS["TreeView_DivID"]++;
return $output;
}
}
public function printTree($tblName)
{
echo $this->createTree($tblName);
}
private function fetchTree(&$parentArray, $parentID=null, $depth=0)
{
global $dbLink;
if($parentID == null)
{
$parentID = 1;
}
$sql = "SELECT `id` FROM `{$this->tblName}` WHERE `parentID`= ". intval($parentID);
$result = $dbLink->query($sql);
if($result)
{
while($row = mysqli_fetch_assoc($result))
{
$this->levels[$depth][]= $row['id'];
$currentID = $row['id'];
$parentArray[$currentID] = array();
$this->fetchTree($parentArray[$currentID], $currentID, $depth+1);
}
$result->close();
}
else
{
die("Failed to execute query! ($level / $parentID)");
}
}
private function buildHtml($data, &$output)
{
foreach($data as $_id => $_children)
{
$output .= "<div style='background-color:white;' id=\"Tree{$GLOBALS["TreeView_DivID"]}_{$_id}\"><p>{$_id}</p>";
$this->buildHtml($_children, $output);
$output .= "</div>";
}
}
}
?>[/CODE]
Java script file for drawing line between node
[CODE] /**
* Handles drawing lines between the tree structures generated by PHP.
*/
var TreeView =
{
/** Constants (sort of) **/
LINE_MARGIN : 20, // px
BORDER_STYLE : "solid 2px red",
/** A list of root elements to draw when the window is loaded. */
trees : [],
/**
* Adds a tree to the list of trees to be drawn.
* @param rootID The ID of the root element of the tree.
*/
addTree : function(rootID)
{
this.trees.push(rootID);
},
/**
* Loops through all the trees and executes the drawing function for each of them.
*/
drawAll : function()
{
for(var x = 0; x < this.trees.length; x++)
{
var root = $("#" + this.trees[x]);
if(root.length > 0)
{
this.drawTree(root);
}
}
},
/**
* Recursively draws all lines between all root-child elements in the given tree.
* @param root The root element of the tree to be drawn.
*/
drawTree : function(root)
{
root = $(root);
if(root.length > 0)
{
var children = root.children('div');
for(var i = 0; i < children.length; i++)
{
this.drawLine(root, children[i]);
this.drawTree(children[i]);
}
}
},
/**
* Draws a line between the two passed elements.
* Uses an absolutely positioned <div> element with the borders as the lines.
* @param elem1 The first element
* @param elem2 The second element
*/
drawLine : function(elem1, elem2)
{
// Use the <p> element as the base. Otherwise the height() call on the
// <div> will return the entire hight of the tree, including the children.
elem1 = $(elem1).find("p").eq(0);
elem2 = $(elem2).find("p").eq(0);
var e1_pos = $(elem1).position();
var e2_pos = $(elem2).position();
var borders = { top:true, left:true, right:false, bottom:false };
// Move the position to the center of the element
e1_pos.left += ($(elem1).width() / 2);
e1_pos.top += ($(elem1).height() / 2);
e2_pos.left += ($(elem2).width() / 2);
e2_pos.top += ($(elem2).height() / 2);
// Position if they are horizontally aligned.
if(e1_pos.left == e2_pos.left)
{
borders.top = false;
if(e1_pos.top < e2_pos.top)
{
e1_pos.top += ($(elem1).height() / 2);
e2_pos.top -= ($(elem2).height() / 2);
}
else
{
e1_pos.top -= ($(elem1).height() / 2);
e2_pos.top += ($(elem2).height() / 2);
}
}
// Position if they are verticaly aligned.
else if(e1_pos.top == e2_pos.top)
{
borders.left = false;
e1_pos.top += ($(elem1).height() / 2);
e2_pos.top += ($(elem2).height() / 2);
if(e1_pos.left < e2_pos.left)
{
e1_pos.left += $(elem1).width();
}
else
{
e2_pos.top += $(elem2).height();
}
}
// Position if the elements are not aligned.
else
{
if(e1_pos.left < e2_pos.left)
{
borders.right = true;
borders.left = false;
}
if(e1_pos.top > e2_pos.top)
{
borders.bottom = true;
borders.top = false;
}
}
// Calculate the overlay position and size
var over_position = {
left:(e1_pos.left < e2_pos.left ? e1_pos.left : e2_pos.left),
top:(e1_pos.top < e2_pos.top ? e1_pos.top : e2_pos.top)
};
var over_size = {
width:Math.abs(e1_pos.left - e2_pos.left),
height:Math.abs(e1_pos.top - e2_pos.top)
}
// Create the overlay div
var raw_overlay = document.createElement('div');
var overlay = $(raw_overlay);
// Add the borders, and create a margin for the lines so they are not
// drawn "into" the numbers.
if(borders.top) {
overlay.css('border-top', this.BORDER_STYLE);
over_size.height -= this.LINE_MARGIN;
}
if(borders.bottom) {
overlay.css('border-bottom', this.BORDER_STYLE);
over_position.top += this.LINE_MARGIN;
over_size.height -= this.LINE_MARGIN;
}
if(borders.left) {
overlay.css('border-left', this.BORDER_STYLE);
over_size.width -= this.LINE_MARGIN;
}
if(borders.right) {
overlay.css('border-right', this.BORDER_STYLE);
over_position.left += this.LINE_MARGIN;
over_size.width -= this.LINE_MARGIN;
}
overlay.css('position', 'absolute');
overlay.css('top', over_position.top);
overlay.css('left', over_position.left);
overlay.css('width', over_size.width);
overlay.css('height', over_size.height);
document.body.appendChild(overlay.get(0));
}
}[/CODE]
