469,572 Members | 1,147 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,572 developers. It's quick & easy.

dynamic tree hierarchy in javascript

hi,
i want to create a dynamic tree hierarchy in javascript.there are two
parts in tree, group & user.when we click on group then users come
under that's tree category will be opened.problem is that i am not able
to arrange three things simultaneously,group,users & there
functionality simultaneously.dynamic means group & users come from
database and groups & users can be increased in number at any time. i
am sending code for that tree along with this mail.plz kindly get it
attached with mail.plz help me to shootout this problem.
thankyou.

<?php
require($_SERVER['DOCUMENT_ROOT']."/includes/settings.inc.nmp");

require(NMP_WEBROOT_PATH."/includes/common_functions.inc.nmp");
$sql3="Select groupid,groupname FROM tblgroup";
$iResult3=$dbConn->ExecuteSelectQuery($sql3,$rsRes3,$iret_rows3);
?>
<TABLE align="center" width="600" border="1">
<tr>
<td colspan="0" class="DisplayHeader" align="center"><font
size="1.5">Group</font></td>
</td>
<td colspan="0" class="DisplayHeader" align="center"><font
size="1.5">Firewall Rule</font></td>
</td>
</tr>
<TD valign="top">
<TABLE width="125" border="0">
<TD>
<html>
<head>
<title>JavaScript Tree Control</title>
<style>
body{
font: 10pt Verdana,sans-serif;
color: navy;
}
.trigger{
cursor: pointer;
cursor: hand;
}
.branch{
display: none;
margin-left: 35px;
}
x=new array(30);
y=new array(30);
var i=0;
</style>
<script language="JavaScript">
var openImg = new Image();
openImg.src = "open.gif";
var closedImg = new Image();
closedImg.src = "closed.gif";

function showBranch(branch)
{
var objBranch = document.getElementById(branch).style;
if(objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder(branch);
}

function swapFolder(img)
{
objImg = document.getElementById(img);
if(objImg.src.indexOf('closed.gif')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}

</script>
</head>
<?php
while($arRes2=$dbConn->GetData($rsRes3))
{
?>
<div>
<class="trigger"
onClick="showBranch('x[i++]');
swapFolder('y[i++]')">
<INPUT TYPE=checkbox NAME=chkbx VALUE="" >
&nbsp;&nbsp;<img src="userimg3.gif" border="0"
id="y[i++]"><font size="1.5">
<?php echo $arRes2['groupname'];?></font>
</div>
<span class="branch" id="x[i++]">
<?php
$sql1="Select username FROM tbluser where groupname
='$arRes2[groupname]'";

$iResult1=$dbConn->ExecuteSelectQuery($sql1,$rsRes1,$iret_rows1);
while($arRes=$dbConn->GetData($rsRes1))
{
?>
<input type=checkbox name=SelMsg1 value="" e[0]><img
src="userimg2.gif"><font size="1.5">
<?php echo $arRes['username'];?></font><br>

<?php
}

?>
</span>
<?php
}
?>

Jul 15 '06 #1
1 4511
hi,
i want to create a dynamic tree hierarchy in javascript.there are two
parts in tree, group & user.when we click on group then users come
under that's tree category will be opened.problem is that i am not able
to arrange three things simultaneously,group,users & there
functionality simultaneously.dynamic means group & users come from
database and groups & users can be increased in number at any time. i
am sending code for that tree along with this mail.plz kindly get it
attached with mail.plz help me to shootout this problem.
thankyou.
Hi Satish,

It would be nice if you posted the actual html output of the php. You did
correctly post the question in this newsgroup because your question is about
Javascript but we will not be able to reproduce your script without the
mysql database.

But let's try and tackle your problem in several shots. First take a look at
what Matt Kruse produced: http://www.javascripttoolbox.com/lib/mktree/
Download all the mktree files and put those on your server.
Then run the following script for mysql:

CREATE TABLE `tree` (
`key` int(11) NOT NULL auto_increment,
`parent` int(11) NOT NULL,
`text` varchar(25) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci
AUTO_INCREMENT=56 ;

INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (1, 0, 'About us');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (2, 0, 'Products');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (3, 0, 'Links');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (7, 1, 'Address');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (8, 1, 'Who we are');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (9, 1, 'Mission');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (10, 1, 'Figures');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (11, 2, 'Content');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (12, 2, 'Web');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (15, 3, 'hotmail.com');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (16, 3, 'cnn.com');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (22, 11, 'Management');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (23, 11, 'Users');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (24, 11, 'Files');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (25, 11, 'How to');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (26, 11, 'FAQ');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (28, 12, 'Graphics');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (29, 12, 'Using');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (30, 12, 'Browsers');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (31, 12, '3d parties');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (32, 12, 'FAQ');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (54, 25, 'New files');
INSERT INTO `tree` (`key`, `parent`, `text`) VALUES (55, 25, 'Save files');

/*
Then create the following php file and make sure it can find Matt's css file
and javascript file. (Of course change the username and password to reflect
your mysql settings!)

<?php
$DB_Hostname = "localhost";
$DB_User = "user";
$DB_Password = "password";
$databasename = "forest";
mysql_connect($DB_Hostname, $DB_User, $DB_Password)
or die('Could not connect: ' . mysql_error());

function generate_ul($p = 0) {
global $databasename;
$tree = '';
$sql = "SELECT `key`, `parent`, `text` FROM `tree` WHERE parent=$p";
$link = mysql_db_query($databasename,$sql);
if (mysql_num_rows($link) 0) {
$tree .= '<ul>';
while ($row = mysql_fetch_assoc($link)) {
$tree .= '<li id="e'.$row['key'].'">' . $row['text'];
$tree .= generate_ul($row['key']);
$tree .= '</li>';
}
$tree .= '</ul>';
}
return $tree;

}

echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tree Sample</title>
<script type="text/javascript" src="mktree.js"></script>
<link rel="stylesheet" type="text/css" href="mktree.css" />
<style type="text/css"<!--
body{font-size: 60%;font-family: arial}
--></style>

</head>
<body>

<ul class="mktree"><li>Tree
<?echo generate_ul(0);?>
</li></ul>
</body>

</html>

and let us know how that worked out! ;-)
*/
Jul 15 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by VB | last post: by
1 post views Thread by russ | last post: by
1 post views Thread by Sehboo | last post: by
4 posts views Thread by Andrzej Jaworek | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.