DaniWeb Forum Index > Web Development > PHP

Binary Tree Using PHP & MySQL

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

« First

•

Join Date: Nov 2009

Posts: 5

Reputation: Anubhav kumar is an unknown quantity at this point

Solved Threads: 0

Anubhav kumar Anubhav kumar is offline

Offline

Newbie Poster

-2

#21

24 Days Ago

Hi,wenzlerpaul
Can you send me full source code ,with html and php and your database
,Definately i help you, i have made four MLM Software, if u have any problem then, solved it
if it is solved then also send us code,I want to check for new method ,if you use recursive then it will slow access the data from database.

Last edited by Ezzaral; 3 Days Ago at 12:11 pm. Reason: Snipped email. Please keep it on site.

•

Join Date: Aug 2007

Posts: 87

Reputation: hemgoyal_1990 is an unknown quantity at this point

Solved Threads: 7

hemgoyal_1990 hemgoyal_1990 is offline

Offline

Junior Poster in Training

#22

20 Days Ago

•

Originally Posted by Atli

Hey.

I'm not sure exactly what you are asking for.
What is the problem? Could you explain it a bit better?
And perhaps show us the code that is causing it?

Atil Could u tell me that how i can draw lines between tree level.
i am trying very much to draw lines but i am not getting success in this method.
please Help me.

Thanx...

http://www.kuchamancity.com
Hem Web Solution..
Behind Every Successful Man, There is an Untold Pain in His Heart.

•

Join Date: Aug 2007

Posts: 87

Reputation: hemgoyal_1990 is an unknown quantity at this point

Solved Threads: 7

hemgoyal_1990 hemgoyal_1990 is offline

Offline

Junior Poster in Training

-1

#23

15 Days Ago

Please Help me...

http://www.kuchamancity.com
Hem Web Solution..
Behind Every Successful Man, There is an Untold Pain in His Heart.

•

Join Date: May 2007

Posts: 431

Reputation: Atli is on a distinguished road

Solved Threads: 56

Atli

Offline

Posting Pro in Training

#24

15 Days Ago

Ok. So I've been messing around, creating a JavaScript object that draws lines between the IDs in my tree-view code. Might help you.

This is basically the same code I posted before, with minor modifications to the Index and PHP file, and an added JavaScript file.
Note; I use jQuery for the JavaScript, loaded from the Google APIs.

I've tested this in all major browsers.

index.php
Uses the PHP class to generate the tree-structure, and includes and executes the JavaScript object that draws the lines between the tree elements.

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<!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">
            // Have the TreeView.drawAll method executed as soon as the DOM is ready.
            $(document).ready(function(){ 
                TreeView.drawAll();
            });
        </script>
    </head>
    <body>
        <?php
        // Fetch the TreeView class from the other file.
        include("class.TreeView.php");
 
        // Open a database connection
        // TODO: Replace the info here with your real info.
        $dbLink = new mysqli("localhost", "usr", "pwd", "dbName");
 
        // Create an instance of the TreeView class.
        $treeView = new TreeView($dbLink);
 
        // Print the tree view
        // TODO: Insert your real table name here.
        $treeView->printTree('dbTable');
 
        $dbLink->close();
        ?>
    </body>
</html>
<!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">
            // Have the TreeView.drawAll method executed as soon as the DOM is ready.
            $(document).ready(function(){ 
                TreeView.drawAll();
            });
        </script>
    </head>
    <body>
        <?php
        // Fetch the TreeView class from the other file.
        include("class.TreeView.php");

        // Open a database connection
        // TODO: Replace the info here with your real info.
        $dbLink = new mysqli("localhost", "usr", "pwd", "dbName");

        // Create an instance of the TreeView class.
        $treeView = new TreeView($dbLink);

        // Print the tree view
        // TODO: Insert your real table name here.
        $treeView->printTree('dbTable');

        $dbLink->close();
        ?>
    </body>
</html>

class.TreeView.php
Uses the database to generate the tree-structure.

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php
/**
 * Handles creating and/or printing a Tree-Like HTML output, complete with
 * all necessary CSS styles.
 *
 * Assumes a MySQL database table structure like so:
 *  CREATE TABLE `name` (
 *    `id` int(11) NOT NULL AUTO_INCREMENT,
 *    `parentID` int(11) DEFAULT NULL,
 *    PRIMARY KEY (`id`)
 *  );
 *
 * Public methods:
 *   createTree - Returns the HTML tree-view.
 *   printTree  - Prints the HTML tree-view.
 *
 * Private methods
 *   fetchTree  - Reads the complete tree structure into an array.
 *   buildHtml  - Builds the HTML div hierarchy based.
 */
class TreeView
{
    private $bgColor = ""; //"background-color: rgba(0, 100, 0, 0.10); ";
 
    private $dbLink;
    private $tblName;
 
    /**
     * Default constructor
     * @param mysqli $dbLink A open MySQL (mysqli) connection.
     * @throws Exception
     */
    public function __construct(mysqli $dbLink)
    {
        if($dbLink != null && $dbLink->connect_errno == 0)
        {
            $this->dbLink = $dbLink;
 
            // This number is added the the container DIV ID, so that we can
            // tell the DIVs a part if there are more than one view created.
            if(!isset($GLOBALS['TreeView_DivID'])) {
                $GLOBALS['TreeView_DivID'] = 0;
            }
        }
        else
        {
            throw new Exception("The mysqli object provided is invalid.");
        }
    }
 
    /**
     * Creates a descending tree-like view of the tree-structure in the given
     * database table and returns it as a string.
     * @param <type> $tblName The name of the database table to use.
     * @return <string> The string output.
     * @throws Exception
     */
    public function createTree($tblName)
    {
        if(!isset($tblName) || empty($tblName))
        {
            throw new Exception("Failed to create the tree. Table or database information is invalid");
        }
        else
        {
            // Set up variables
            $this->tblName = $tblName;
            $treeData = array();
            $output = "";
 
            // Create the output
            $this->fetchTree($treeData);
 
            // Set up the CSS styles, and create the container DIV.
            $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
            $output = <<<HTML
<style type="text/css">
    div#{$divID}     { margin: 0; padding: 0; text-align: center; }
    div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
    div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
</style>
<div id="{$divID}">
HTML;
 
            // Add the DIV hierachy.
            $this->buildHtml($treeData, $output);
 
            // Add the JavaScript call to start drawing the lines
            $rootID = array_keys($treeData);
            $rootID = $rootID[0];
            $output .= <<<HTML
 
<script type="text/javascript">
TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
</script>
HTML;
 
            // Increment the DIV ID number
            $GLOBALS['TreeView_DivID']++;
 
            return $output;
        }
    }
 
    /**
     * Prints a descending tree-like view of the tree-structure in the given
     * database table.
     * @param <type> $tblName The name of the database table to use.
     * @throws Exception
     */
    public function printTree($tblName)
    {
        echo $this->createTree($tblName);
    }
 
    /**
     * A recursive function that fetches a tree-structure from a database into an array.
     * @global <mysqli> $dbLink A open MySQLI connection.
     * @param <number> $parentID The ID the current recursion uses as a root.
     */
    private function fetchTree(&$parentArray, $parentID=null)
    {
        global $dbLink;
 
        // Create the query
        if($parentID == null) {
            $parentID = 0;
        }
        $sql = "SELECT `id` FROM `{$this->tblName}` WHERE `parentID`= ". intval($parentID);
 
        // Execute the query and go through the results.
        $result = $dbLink->query($sql);
        if($result)
        {
            while($row = $result->fetch_assoc())
            {
                // Create a child array for the current ID
                $currentID = $row['id'];
                $parentArray[$currentID] = array();
 
                // Print all children of the current ID
                $this->fetchTree($parentArray[$currentID], $currentID);
            }
            $result->close();
        }
        else {
            die("Failed to execute query! ($level / $parentID)");
        }
    }
 
    /**
     * Builds a HTML <div> hierarchy from the tree-view data.
     * Each parent is encased in a <div> with all their child nodes, and each
     * of the children are also encased in a <div> with their children.
     * @param <array> $data The tree-view data from the fetchTree method.
     * @param <string> $output The <div> hierachy.
     */
    private function buildHtml($data, &$output)
    {
        // Add the DIV hierarchy.
        foreach($data as $_id => $_children)
        {
            $output .= "<div id=\"Tree{$GLOBALS['TreeView_DivID']}_{$_id}\"><p>{$_id}</p>";
            $this->buildHtml($_children, $output);
            $output .= "</div>";
        }
    }
}
?>
<?php
/**
 * Handles creating and/or printing a Tree-Like HTML output, complete with
 * all necessary CSS styles.
 *
 * Assumes a MySQL database table structure like so:
 *  CREATE TABLE `name` (
 *    `id` int(11) NOT NULL AUTO_INCREMENT,
 *    `parentID` int(11) DEFAULT NULL,
 *    PRIMARY KEY (`id`)
 *  );
 *
 * Public methods:
 *   createTree - Returns the HTML tree-view.
 *   printTree  - Prints the HTML tree-view.
 *
 * Private methods
 *   fetchTree  - Reads the complete tree structure into an array.
 *   buildHtml  - Builds the HTML div hierarchy based.
 */
class TreeView
{
    private $bgColor = ""; //"background-color: rgba(0, 100, 0, 0.10); ";

    private $dbLink;
    private $tblName;

    /**
     * Default constructor
     * @param mysqli $dbLink A open MySQL (mysqli) connection.
     * @throws Exception
     */
    public function __construct(mysqli $dbLink)
    {
        if($dbLink != null && $dbLink->connect_errno == 0)
        {
            $this->dbLink = $dbLink;

            // This number is added the the container DIV ID, so that we can
            // tell the DIVs a part if there are more than one view created.
            if(!isset($GLOBALS['TreeView_DivID'])) {
                $GLOBALS['TreeView_DivID'] = 0;
            }
        }
        else
        {
            throw new Exception("The mysqli object provided is invalid.");
        }
    }

    /**
     * Creates a descending tree-like view of the tree-structure in the given
     * database table and returns it as a string.
     * @param <type> $tblName The name of the database table to use.
     * @return <string> The string output.
     * @throws Exception
     */
    public function createTree($tblName)
    {
        if(!isset($tblName) || empty($tblName))
        {
            throw new Exception("Failed to create the tree. Table or database information is invalid");
        }
        else
        {
            // Set up variables
            $this->tblName = $tblName;
            $treeData = array();
            $output = "";

            // Create the output
            $this->fetchTree($treeData);

            // Set up the CSS styles, and create the container DIV.
            $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
            $output = <<<HTML
<style type="text/css">
    div#{$divID}     { margin: 0; padding: 0; text-align: center; }
    div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
    div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
</style>
<div id="{$divID}">
HTML;

            // Add the DIV hierachy.
            $this->buildHtml($treeData, $output);

            // Add the JavaScript call to start drawing the lines
            $rootID = array_keys($treeData);
            $rootID = $rootID[0];
            $output .= <<<HTML

<script type="text/javascript">
TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
</script>
HTML;

            // Increment the DIV ID number
            $GLOBALS['TreeView_DivID']++;

            return $output;
        }
    }

    /**
     * Prints a descending tree-like view of the tree-structure in the given
     * database table.
     * @param <type> $tblName The name of the database table to use.
     * @throws Exception
     */
    public function printTree($tblName)
    {
        echo $this->createTree($tblName);
    }

    /**
     * A recursive function that fetches a tree-structure from a database into an array.
     * @global <mysqli> $dbLink A open MySQLI connection.
     * @param <number> $parentID The ID the current recursion uses as a root.
     */
    private function fetchTree(&$parentArray, $parentID=null)
    {
        global $dbLink;

        // Create the query
        if($parentID == null) {
            $parentID = 0;
        }
        $sql = "SELECT `id` FROM `{$this->tblName}` WHERE `parentID`= ". intval($parentID);

        // Execute the query and go through the results.
        $result = $dbLink->query($sql);
        if($result)
        {
            while($row = $result->fetch_assoc())
            {
                // Create a child array for the current ID
                $currentID = $row['id'];
                $parentArray[$currentID] = array();

                // Print all children of the current ID
                $this->fetchTree($parentArray[$currentID], $currentID);
            }
            $result->close();
        }
        else {
            die("Failed to execute query! ($level / $parentID)");
        }
    }

    /**
     * Builds a HTML <div> hierarchy from the tree-view data.
     * Each parent is encased in a <div> with all their child nodes, and each
     * of the children are also encased in a <div> with their children.
     * @param <array> $data The tree-view data from the fetchTree method.
     * @param <string> $output The <div> hierachy.
     */
    private function buildHtml($data, &$output)
    {
        // Add the DIV hierarchy.
        foreach($data as $_id => $_children)
        {
            $output .= "<div id=\"Tree{$GLOBALS['TreeView_DivID']}_{$_id}\"><p>{$_id}</p>";
            $this->buildHtml($_children, $output);
            $output .= "</div>";
        }
    }
}
?>

TreeView.js
Draws the lines between the elements in the PHP generated tree-structure.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
/**
 * Handles drawing lines between the tree structures generated by PHP.
 */
var TreeView =
{
    /** Constants (sort of) **/
    LINE_MARGIN : 10, // px
    BORDER_STYLE : "solid 1px #555555",
 
    /** 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));
    }
}
/**
 * Handles drawing lines between the tree structures generated by PHP.
 */
var TreeView =
{
    /** Constants (sort of) **/
    LINE_MARGIN : 10, // px
    BORDER_STYLE : "solid 1px #555555",

    /** 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));
    }
}

Please do not ask for help in a PM. Use the forums.
And use [code] tags!

•

Join Date: May 2007

Posts: 431

Reputation: Atli is on a distinguished road

Solved Threads: 56

Atli

Offline

Posting Pro in Training

#25

15 Days Ago

P.S.
You can see the above code in action on my test server: http://atli.advefir.com/test/treeview/.

Please do not ask for help in a PM. Use the forums.
And use [code] tags!

•

Join Date: Aug 2007

Posts: 87

Reputation: hemgoyal_1990 is an unknown quantity at this point

Solved Threads: 7

hemgoyal_1990 hemgoyal_1990 is offline

Offline

Junior Poster in Training

#26

7 Days Ago

Thanx Atli for Helping me Out.
But i found some bug in your above given code:
Please Visit Below URL for Some Bug:
http://www.liferider.info/mlm/tree.php?tree=0 (without name)
http://www.liferider.info/mlm/tree1.php?tree=0 (with name) //Problem Occur in Display.)
You may Change Above tree=0 Value with any of parent id.

There are a Problem When The Parent ID Contain Too Much Node in First Level The Remaining Node Show Below Second Level Node.
So There Occur Many Confusion Understanding Tree.

and another Problem is When we Draw any Parent ID Tree Only First Node will Print Lines in Tree.

Please Check Above URL for Batter Understanding.
Thank You.

http://www.kuchamancity.com
Hem Web Solution..
Behind Every Successful Man, There is an Untold Pain in His Heart.

•

Join Date: May 2007

Posts: 431

Reputation: Atli is on a distinguished road

Solved Threads: 56

Atli

Offline

Posting Pro in Training

#27

7 Days Ago

•

Originally Posted by hemgoyal_1990

Thanx Atli for Helping me Out.
But i found some bug in your above given code:

The problem is that the code relies on your browser to correctly align the <div> elements. When the tree is wider then the browser window, the browser automatically re-arranges the <div> elements to fit the window size.

What you need to do to get around this is to create a container around the tree - a <div> element - and manually set it's width to something large enough to contain the entire width of the tree. This will add a horizontal scroll-bar to the browser window, allowing you to scroll sideways to see the parts of the tree that will not fit.

To that end, try altering the PHP TreeView::createTree method to include this container div in the tree output.
Starting at line #74:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
           // Set up the CSS styles, and create the container DIV.
            $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
            $output = <<<HTML
<style type="text/css">
    div#{$divID}     { margin: 0; padding: 0; text-align: center; }
    div#{$divID}_Inner { width: 5000px; }
    div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
    div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
</style>
<div id="{$divID}">
    <div id="{$divID}_Inner">
HTML;
 
            // Add the DIV hierachy.
            $this->buildHtml($treeData, $output);
 
            // Add the JavaScript call to start drawing the lines
            $rootID = array_keys($treeData);
            $rootID = $rootID[0];
            $output .= <<<HTML
    </div>
    <script type="text/javascript">
        TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
    </script>
</div>
HTML;
           // Set up the CSS styles, and create the container DIV.
            $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
            $output = <<<HTML
<style type="text/css">
    div#{$divID}     { margin: 0; padding: 0; text-align: center; }
    div#{$divID}_Inner { width: 5000px; }
    div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
    div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
</style>
<div id="{$divID}">
    <div id="{$divID}_Inner">
HTML;

            // Add the DIV hierachy.
            $this->buildHtml($treeData, $output);

            // Add the JavaScript call to start drawing the lines
            $rootID = array_keys($treeData);
            $rootID = $rootID[0];
            $output .= <<<HTML
    </div>
    <script type="text/javascript">
        TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
    </script>
</div>
HTML;

This will set the maximum with of the tree to 5000px, which should be large enough for a pretty large tree.

Please do not ask for help in a PM. Use the forums.
And use [code] tags!

« First

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes