By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,042 Members | 1,293 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,042 IT Pros & Developers. It's quick & easy.

dynamic tree hierarchy in javascript

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.