• Post Reply Bookmark Topic Watch Topic
  • New Topic

create treeview in jsp???????????  RSS feed

 
verduka fox
Ranch Hand
Posts: 178
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I need to display my results in a treeview, using JSP/HTML (no applets). Each node of the tree may have 1, 2, or 3 levels. I would like to use the +/- to expand/collapse the tree. However, I don't know of a way to do this. Has anyone else encountered this problem? How did you solve it? Sample code and/or articles are very much appreciated!!
 
Rakesh Ray
Ranch Hand
Posts: 51
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Following site should help you.
http://www.geocities.com/Paris/LeftBank/2178/foldertree.html
 
verduka fox
Ranch Hand
Posts: 178
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Rakesh,
This product looks promising. Have you used it? Is it easy to use? How is the support? How is performance with this product? Please give me some feedback regarding this product. Thanks.
v
 
verduka fox
Ranch Hand
Posts: 178
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I just discussed this product with my manager: he wants everything to be on the server side. The folder tree Rakesh describes appears to be on the client side. Does anyone know of a way to create a treeview on the server side? Please help!
 
Vlad Patryshev
Ranch Hand
Posts: 61
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It seems like it makes a lot of sense to write something like a template for this. But before doing that, I wonder if this has not been already solved in Dreamweaver 6.
 
Tim Holloway
Bartender
Posts: 18715
71
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you can run on the client side, I'd recommend it. Users have the expectation that a treeview will open and close nodes almost instantly. To make a server open or close a node display, you have to reformat and retransmit the entire page, and that will take noticably longer.
 
Manohar Karamballi
Ranch Hand
Posts: 227
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hai All!
i donn think there is need for refreshing page always. I did two level hierarchy tree structure and it worked fine in IE and NS.
By using DIV tags we can alternatively show & hide child divisions and reformat entire page.
Rgds
Manohar
 
verduka fox
Ranch Hand
Posts: 178
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for all the responses. I'm especially interested in Manohar's suggestion regarding the DIV tags. I've looked for some documentation on how to use this tag for this purpose, but I haven't found any. Can you give me an example of how to alternately show and hide the child divisions?
 
Manohar Karamballi
Ranch Hand
Posts: 227
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hai!
Here is code for generating tree. But it's for 2 level tree and there may be some vestigial code in that...
Let me know if it works fine or not....
<HTML>
<HEAD>
<TITLE>Hierarchical View Which works for both NN ans IE</TITLE>
<STYLE TYPE="text/css">
BODY {OVERFLOW:scroll;OVERFLOW-X:hidden}
.D11 {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var bV=parseInt(navigator.appVersion);
NS4=(document.layers) ? true : false;
IE4=((document.all)&&(bV>=4))?true:false;
ver4 = (NS4 | | IE4) ? true : false;
function expandIt(){return}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
isExpanded = false;
function getIndex(el)
{
ind = null;
for (i=0; i<document.layers.length; i++)
{
whichEl = document.layers[i];
if (whichEl.id == el)
{
ind = i;
break;
}
}
return ind;
}
function arrange()
{
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++)
{
whichEl = document.layers[i];
if (whichEl.visibility != "hide")
{
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt()
{
// For NS family
if (NS4)
{
for (i=0; i<document.layers.length; i++)
{
whichEl = document.layers[i];

// If Id Contains Child Substring then Hide it
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
if (whichEl.id.indexOf("ToolTip") != -1) whichEl.visibility = "hide";
}
arrange();
}
// For IE family
else
{
tempColl = document.all.tags("DIV");
//If Id Contains class Child then Hide it
for (i=0; i<tempColl.length; i++)
{
if (tempColl(i).className == "child") tempColl(i).style.display = "none";
if (tempColl(i).className == "ToolTip") tempColl(i).style.display = "none";
}
}
}
function expandIt(el)
{
if (!ver4) return;
if (IE4)
{
expandIE(el)
}
else
{
expandNS(el)
}
}
function expandIE(el)
{
whichEl = eval(el + "Child");
whichIm = event.srcElement;
//
if (whichEl.style.display == "none")
{
whichEl.style.display = "block";
whichIm.src = "minus.gif";
}

else
{
whichEl.style.display = "none";
whichIm.src = "plus.gif";
}
}
function hideToolTip(index)
{
if(NS4)
{
el=eval("document.ToolTip"+index)
whichEl = eval(el);
whichEl.visibility = "hide";

}
else
{
el=eval("document.all.ToolTip"+index)
whichEl = eval(el);
whichEl.style.display = "none";
}
}
function showToolTip(index)
{
if(NS4)
{
el=eval("document.ToolTip"+index)
whichEl = eval(el);
whichEl.visibility = "show";
}
else
{
el=eval("document.all.ToolTip"+index)
whichEl = eval(el);
whichEl.style.display = "block";
}
}
function expandNS(el) {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide")
{
whichEl.visibility = "show";
whichIm.src = "plus.gif";
}
else
{
whichEl.visibility = "hide";
whichIm.src = "minus.gif";
}
arrange();
}
function showAll()
{
for (i=firstInd; i<document.layers.length; i++)
{
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
with (document)
{
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:hidden}");
write(".child {position:absolute; visibility:hidden}");
write(".tooltip {position:absolute; visibility:hidden}");
write(".regular {position:absolute; visibility:hidden}")
}
else {
write(".child {display:none}")
write(".tooltip {display:none}")
}
write("</STYLE>");
}
onload = initIt;
//-->
</script>

</HEAD>
<BODY>
<DIV ID="elOneParent" CLASS=parent>
<table border=1 align="center" width=400>
<tr bgcolor="#CCCC99">
<td width=200>
Subscribe?
</td>
<td width=200>
Publication
</td>
</tr>
<tr>
<td width=200 >
<A HREF="#" onClick="expandIt('elOne'); return false">
<IMG NAME="imEx" SRC="plus.gif" WIDTH=16 HEIGHT=16 BORDER=0 >
</A>

</td>
<td width=200>
publication One
</td>
</tr>
</table>
</DIV>
<DIV ID="elOneChild" CLASS=child>
<Table Border=1 cellspacing=1 cellpadding=1 align="center" width=400>
<TR>
<TH colspan=3 bgcolor="#CCCC99">
Description
</TH>
</TR>
<TR>
<TD>
This is publication number one
</TD>
</TR>
</Table>
</DIV>
<DIV ID="elTwoParent" CLASS=parent>
<table border=1 align="center" width=400>
<tr><td width=200 >
<A HREF="#" onClick="expandIt('elTwo'); return false">
<IMG NAME="imEx" SRC="plus.gif" WIDTH=16 HEIGHT=16 BORDER=0 ALT="Expand/Collapse Item">
</A>

</td><td width=200>publication Two</td></tr></table>
</DIV>
<DIV ID="elTwoChild" CLASS=child>
<Table Border=1 cellspacing=1 cellpadding=1 align="center" width=400>
<TR> <TH colspan=3 bgcolor="#CCCC99"> Description </TH> <TR>
<TR> <TD>This is publication number Two </TD> <TR>
</Table>
</DIV>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (NS4)
{
firstEl = "elOneParent";
firstInd = getIndex(firstEl);
showAll();
arrange();
}
//-->
</SCRIPT>

</BODY>
</html>
Rgds
Manohar
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!