dynamic tree hierarchy in javascript

S

Satish.Talyan

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
}
?>
 
M

Marc

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.
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
SendGrid email issue in responsive Gmail 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
How to have two html audio players on one page? 0
Registration form 13
Help with Visual Lightbox: Scripts 2

Members online

Total: 24 (members: 1, guests: 23)
Robots: 320

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top