Forums

Welcome Guest Search | Active Topics | Members

Expanding Nodes in Deep Tree Options
Fedor
Posted: Friday, April 16, 2004 4:40:00 AM

Rank: Advanced Member
Groups: Administration , Member

Joined: 7/28/2003
Posts: 1,185
Points: -358
Location: WA, US
Thanks to Toni Rossmann who has sent us script for expadning nodes in Deep Tree.

To expand a node, just use following code add a param name expand="true" in XML tag.

Code:
<!--
'*********************************************************************************
' COMobjects.NET Deep Tree Script(c) Fedor Skvortsov, COMobjects.NET. November, 2001
' Mailto: fed@comobjects.net
' WWW: http://comobjects.net
'*********************************************************************************
-->
<html>
<head>
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type="text/css">
LI
{
margin-left:-25px;
list-style-type:none;
list-style-image:none;
font-family:verdana;
font-size:8pt;
}
</style>
<link href="../../styles.css" rel="stylesheet" type="text/css">

<script language="jscript"> 
//Root Tree
var sRootTree = "TOC/Root.asp?id_setor=1"

//Images
var sImagesPath = "Images/";
var sImageNone = sImagesPath + "none.gif";
var sImagePlus = sImagesPath + "plus.gif";
var sImageMinus = sImagesPath + "minus.gif";
//Styles
var sNodeLoadingClass = "load";
var sNodeClass = "treenode";
var sNodeOverClass = "treenodeover";
var sNodeSelClass = "treenodesel"
var sNodeSelOverClass = "treenodeselover"
//Text
var sCancelLoad = "Abrindo...";

//XML Document which contains tree
var oXML;
//Base href for current loading node
var sBaseHref;
//Selected node
var oSelNode;
//Curent loading node. Only one node can be being loading at one moment!*/
var loadingNode;

//Show loading node [Loading...]
function showLoadingNode(Node){
var oDiv;
oDIV = document.createElement("<div>");
oDIV.className = sNodeLoadingClass;
oDIV = Node.appendChild(oDIV);
oDIV.innerText = sCancelLoad;
oDIV.onclick = cancelLoad;

}

//Hide loading node
function hideLoadingNode(Node){
try{
  if (Node.childNodes.length>1){
   oDIV = Node.childNodes(1);
   Node.removeChild(oDIV);
  }
}
catch(x){}
}

//This function builds tree.
//Parameter sourceNode is a XML source node, resultNode is a produced HTML node,
//expanded specifies whether display resultNode  expanded or not.

function buildTree(sourceNode, resultNode, expanded){
var oLI, oUL, oIMG, oA, oNOBR, i, oNodeAttributes;
var sIcon, sName, sHref, sTitle, sTarget, sSrc;
//Create container for child nodes
oUL = document.createElement("<ul>");
oUL = resultNode.appendChild(oUL);
//if node expanded then display container
if (expanded=="true"){
  oUL.style.display="block";
}
else{
  oUL.style.display="none";
}
//Run over nodes in XML source
for (i=0;i<sourceNode.childNodes.length;i++){
  //Set obligatory values
  oNodeAttributes = sourceNode.childNodes(i).attributes;
  sIcon = oNodeAttributes.getNamedItem("icon").value;
  sName = oNodeAttributes.getNamedItem("name").value;
  //Set optional values
  if (oNodeAttributes.getNamedItem("href")!= null){
   sHref = oNodeAttributes.getNamedItem("href").value;
  }
  else{
   sHref = "";
  }
  if (oNodeAttributes.getNamedItem("title")!= null){
   sTitle = oNodeAttributes.getNamedItem("title").value;
  }
  else{
   sTitle = "";
  }
  if (oNodeAttributes.getNamedItem("target")!=null){
   sTarget = oNodeAttributes.getNamedItem("target").value;
  }
  else{
   sTarget = ""
  }
  //Create node
  oLI = document.createElement("<li>");
  oLI = oUL.appendChild(oLI);
  oNOBR = document.createElement("<nobr>");
  oNOBR = oLI.appendChild(oNOBR);
  //Create action image
  oIMG = document.createElement("<img>");
  oIMG.border = 0;
  //If src attribute is not empty, add custom attribute to the result node
  if (oNodeAttributes.getNamedItem("src")!=null){
   sSrc = oNodeAttributes.getNamedItem("src").value;   
  }
  else{
   sSrc = "";
  } 
  oLI.setAttribute("src", sSrc);
  //If src attribute is not empty or amount of the child nodes is not equals zero
 
  var teste
   
  if (sSrc!="" || sourceNode.childNodes(i).childNodes.length>0){
   //If sub nodes was not loaded
   if (sSrc!=""){
    oLI.setAttribute("LoadedChildren", "false");   
   }
   //If sub nodes are already loaded
   else{
    oLI.setAttribute("LoadedChildren", "true");
   }
   oIMG.src = sImagePlus;
   oLI.setAttribute("Expanded", "false");
   //Set action image event handler 
   oIMG.onclick = actionOnClick;

  } 
  else{
   oIMG.src = sImageNone;
   
  }
  //Create icon image
  oIMG = oNOBR.appendChild(oIMG);
  oIMG = document.createElement("<img>");
  oIMG.border = 0;
  oIMG.src = sImagesPath + sIcon + ".gif";
  oIMG = oNOBR.appendChild(oIMG);
  oA = document.createElement("<a>");
  if (sHref!=""){
   //oA.href = sBaseHref + sHref;
   oA.href = sHref;
   //Set event handler for node 
   oA.onclick = nodeOnClick;
   oA.onmouseover = nodeOnMouseOver;
   oA.onmouseout = nodeOnMouseOut;   
  } 
  if (sTarget!=""){
   oA.target = sTarget; 
  }
  oA.innerHTML = sName;
  if (sTitle!=""){
   oA.title = sTitle; 
  }
  oA.className = "treenode";
  oA = oNOBR.appendChild(oA);

  if (sourceNode.childNodes(i).childNodes.length>0)
  {
   //Assembly subtree
   buildTree(sourceNode.childNodes(i), oLI, "false")

  }
[b]  // Check if the atual node will be expanded
  if (oNodeAttributes.getNamedItem("expand").value == "true"){
   AutoExpand_add(oLI) 
  }[/b]

}
//Add custom attributes to resultNode which specifies whether node loaded children or not and
//whether is was expanded or not
resultNode.setAttribute("LoadedChildren", "true")
resultNode.setAttribute ("Expanded", expanded);
}

//This function handle OnClick event on action image
function actionOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.parentNode.parentNode.getAttribute ("Expanded")=="true"){
  oNode.parentNode.parentNode.childNodes(1).style.display = "none";
  oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImagePlus;
  oNode.parentNode.parentNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
  //If children nodes are already loaded, just expand it
  if (oNode.parentNode.parentNode.getAttribute("LoadedChildren")=="true"){
   oNode.parentNode.parentNode.childNodes(1).style.display = "block";
   oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImageMinus; 
   oNode.parentNode.parentNode.setAttribute ("Expanded", "true")
  }
   //Children nodes are not loaded yet, we need to load it
  else{
   //If the other nodes are loaded at the current time, we should stop it
   if (loadingNode!=null){
    hideLoadingNode(loadingNode);
   }
   //Set new node
   loadingNode = oNode.parentNode.parentNode;
   //Show loading node
   showLoadingNode(loadingNode); 
   //Assembly subtree
   oXml.load(loadingNode.getAttribute("src"));
  }
}
}

[b]var AutoExpand_array = new Array();
var AutoExpand_array_pos = -1;

function AutoExpand_add(NODE_ID){
AutoExpand_array[AutoExpand_array.length] = NODE_ID;
}
function AutoExpand_next(){
if (AutoExpand_array_pos < AutoExpand_array.length-1){
  AutoExpand_array_pos++;
  AutoExpand(AutoExpand_array[AutoExpand_array_pos]);
}
}
function AutoExpand(oNode){ //This is the same function as the actionOnClick function. Just some changes.

event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.getAttribute ("Expanded")=="true"){
  oNode.parentNode.parentNode.childNodes(1).style.display = "none";
  oNode.childNodes(0).childNodes(0).src = sImagePlus;
  oNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
  //If children nodes are already loaded, just expand it
  if (oNode.getAttribute("LoadedChildren")=="true"){
   oNode.childNodes(1).style.display = "block";
   oNode.childNodes(0).childNodes(0).src = sImageMinus; 
   oNode.setAttribute ("Expanded", "true")
  }
   //Children nodes are not loaded yet, we need to load it
  else{
   //If the other nodes are loaded at the current time, we should stop it
   if (loadingNode!=null){
    hideLoadingNode(loadingNode);
   }
   //Set new node
   loadingNode = oNode;
   //Show loading node
   showLoadingNode(loadingNode); 
   //Assembly subtree
   oXml.load(loadingNode.getAttribute("src"));
//   alert(loadingNode.getAttribute("src"))
  }
}
}[/b]


//This function handles OnClick event on link
function nodeOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
if (oSelNode!=null)
{
  oSelNode.childNodes(0).childNodes(2).className = sNodeClass;
}
oSelNode = oNode.parentNode.parentNode;
oSelNode.childNodes(0).childNodes(2).className = sNodeSelOverClass;
//Add your code to handle this event
}

//This function handles OnMouseOver event on link
function nodeOnMouseOver(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = oNode.innerText;
if (oNode.className==sNodeSelClass){
  oNode.className = sNodeSelOverClass;
}
else{
  oNode.className = sNodeOverClass;
}
//Add your code to handle this event
}

//This function handles OnMouseOut event on link
function nodeOnMouseOut(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = "";
if (oNode.className==sNodeSelOverClass){
  oNode.className = sNodeSelClass;
}
else{
  oNode.className = sNodeClass;
}
//Add your code to handle this event
}

//This function handles OnClick event on loading node
function cancelLoad(){
var oNode
oNode = event.srcElement;
hideLoadingNode(oNode.parentElement);
loadingNode = null;
}


function initPage(){
oSelNode = null;
//set loadingNode to the tree container
loadingNode = document.all("Tree");
oXml = new ActiveXObject("Microsoft.XMLDOM");
//Change this property to false if you are working in synchronous mode
oXml.async = false;
//set handler for xml data loading event
oXml.onreadystatechange = onLoadXml;
//load root xml data source
oXml.load(sRootTree);
}

//This function parses and builds tree when XML data source has been loaded
function onLoadXml(){
//test if xml was fully loaded (COMPLETED(4))
if (oXml.readyState==4){
  hideLoadingNode (loadingNode); 
  //test if xml is well formed and contains other than documentElement nodes
  if ((oXml.parseError.reason=="") && (oXml.documentElement.childNodes.length>0)){ 
   if (loadingNode!=document.all("Tree")){
    loadingNode.childNodes(0).childNodes(0).src = sImageMinus;
   }
   //Set sBaseHref which specifies the baseline URL
   sBaseHref = oXml.documentElement.attributes.getNamedItem("base").value;
   //Building treeview starts with documentElement of XML and loading node
   //We expand only one level of deep treeview, so we just pass "true" value in this call     
   buildTree(oXml.documentElement, loadingNode, "true"); 
  }
  else
  {
   //If subtree loading have been failed, change action image to none and remove event handler 
   loadingNode.childNodes(0).childNodes(0).src = sImageNone;
   loadingNode.childNodes(0).childNodes(0).onclick = null;
  }
  //Actions with loading node are finished, so set it to null
  loadingNode = null;
 
[b]  // Expand next node (this prevent loading node load just one node per time)
  AutoExpand_next();[/b]
   
}

  </script>
</head>
<body onload="initPage();">
<form action="../index.asp" method="get" name="form" id="form">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td> <div id="Tree"> </div>
        <%
id_setor = Request.QueryString("id_setor")
if id_setor = "" then
  id_setor = 1
end if
%>
        <script>
function abre_pagina(id_setor,id_pagina,id_tipo){
  id_setor_atual = <%=id_setor%>;
 
  if ((id_setor != null) && (id_pagina != null) && (id_tipo != null)){
   if (id_setor_atual == id_setor){
    if (id_tipo == 1){
     parent.mostra_editor(true,id_pagina);
    }
    else if (id_tipo == 2){
     parent.mostra_editor_url(true,id_pagina);
    }
   else
    {
     parent.abre_pagina('setor.asp?id='+id_setor)
    }
   }
  }
}
</script> </td>
    </tr>
  </table>
 
    <input type="submit" name="Submit" value="Submit">
 
</form>
</body>
</html>


Best regards,
Fedor Skvortsov
gboissiere
Posted: Tuesday, August 10, 2004 1:19:00 AM
Rank: Member
Groups: Member

Joined: 8/10/2004
Posts: 1
Points: 0
Is there a way to expand nodes in a cross-platform way?

The code above does not work on Mozilla because of:
Code:
  oXml = new ActiveXObject("Microsoft.XMLDOM");


I tried to modify the original 2.0 code to expand nodes by using
Code:
  processLoading(beingLoadedNode.getAttribute("src"));

instead of
Code:
  oXml.load(loadingNode.getAttribute("src"));

and no load everything upfront but with no luck.

It seems like the code is failing silently on this line if it is called more than once with different URLs:
Code:
  window.tocLoader.location = sTreeURL;


Any insights on how to make this work?
Thanks!

Guillaume
Fedor
Posted: Tuesday, August 10, 2004 1:23:00 AM

Rank: Advanced Member
Groups: Administration , Member

Joined: 7/28/2003
Posts: 1,185
Points: -358
Location: WA, US
Please see source code of left frame with TOC on our site. It is done cross-platform way.

It works in IE, Mozilla, Opera, Komqueror....

If you need more detailed assistance don't hesitate to ask me.

Best regards,
Fedor Skvortsov
Phoenix
Posted: Thursday, October 13, 2005 10:27:49 AM
Rank: Member
Groups: Member

Joined: 10/13/2005
Posts: 2
Points: 0
a lot of bugs in the code: (i have not marked all)
Quote:
Fedor (4/16/2004)
Thanks to Toni Rossmann who has sent us script for expadning nodes in Deep Tree.

To expand a node, just use following code add a param name expand="true" in XML tag.

Code:
<!--
'*********************************************************************************
' COMobjects.NET Deep Tree Script(c) Fedor Skvortsov, COMobjects.NET. November, 2001
' Mailto: fed@comobjects.net
' WWW: http://comobjects.net
'*********************************************************************************
-->
<html>
<head>
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type="text/css">
LI
{
margin-left:-25px;
list-style-type:none;
list-style-image:none;
font-family:verdana;
font-size:8pt;
}
</style>
<link href="../../styles.css" rel="stylesheet" type="text/css">

<script [color=red]type="text/javascript"[/color] language="jscript"> 
//Root Tree
var sRootTree = "TOC/Root.asp?id_setor=1"

//Images
var sImagesPath = "Images/";
var sImageNone = sImagesPath + "none.gif";
var sImagePlus = sImagesPath + "plus.gif";
var sImageMinus = sImagesPath + "minus.gif";
//Styles
var sNodeLoadingClass = "load";
var sNodeClass = "treenode";
var sNodeOverClass = "treenodeover";
var sNodeSelClass = "treenodesel"
var sNodeSelOverClass = "treenodeselover"
//Text
var sCancelLoad = "Abrindo...";

//XML Document which contains tree
var oXML;
//Base href for current loading node
var sBaseHref;
//Selected node
var oSelNode;
//Curent loading node. Only one node can be being loading at one moment!*/
var loadingNode;

//Show loading node [Loading...]
function showLoadingNode(Node){
var oDiv;
oDIV = document.createElement("[color=red]<[/color]div[color=red]>[/color]");
oDIV.className = sNodeLoadingClass;
[color=red]oDIV = [/color]Node.appendChild(oDIV);
oDIV.innerText = sCancelLoad;
oDIV.onclick = cancelLoad;

}

//Hide loading node
function hideLoadingNode(Node){
try{
  if (Node.childNodes.length>1){
   oDIV = Node.childNodes(1);
   Node.removeChild(oDIV);
  }
}
catch(x){}
}

//This function builds tree.
//Parameter sourceNode is a XML source node, resultNode is a produced HTML node,
//expanded specifies whether display resultNode  expanded or not.

function buildTree(sourceNode, resultNode, expanded){
var oLI, oUL, oIMG, oA, oNOBR, i, oNodeAttributes;
var sIcon, sName, sHref, sTitle, sTarget, sSrc;
//Create container for child nodes
oUL = document.createElement("[color=red]<[/color]ul[color=red]>[/color]");
[color=red]oUL = [/color]resultNode.appendChild(oUL);
//if node expanded then display container
if (expanded=="true"){
  oUL.style.display="block";
}
else{
  oUL.style.display="none";
}
//Run over nodes in XML source
for (i=0;i<sourceNode.childNodes.length;i++){
  //Set obligatory values
  oNodeAttributes = sourceNode.childNodes(i).attributes;
  sIcon = oNodeAttributes.getNamedItem("icon").value;
  sName = oNodeAttributes.getNamedItem("name").value;
  //Set optional values
  if (oNodeAttributes.getNamedItem("href")!= null){
   sHref = oNodeAttributes.getNamedItem("href").value;
  }
  else{
   sHref = "";
  }
  if (oNodeAttributes.getNamedItem("title")!= null){
   sTitle = oNodeAttributes.getNamedItem("title").value;
  }
  else{
   sTitle = "";
  }
  if (oNodeAttributes.getNamedItem("target")!=null){
   sTarget = oNodeAttributes.getNamedItem("target").value;
  }
  else{
   sTarget = ""
  }
  //Create node
  oLI = document.createElement("[color=red]<[/color]li[color=red]>[/color]");
  [color=red]oLI = [/color]oUL.appendChild(oLI);
  oNOBR = document.createElement("[color=red]<[/color]nobr[color=red]>[/color]");
  [color=red]oNOBR = [/color]oLI.appendChild(oNOBR);
  //Create action image
  oIMG = document.createElement("[color=red]<[/color]img[color=red]>[/color]");
  oIMG.border = 0;
  //If src attribute is not empty, add custom attribute to the result node
  if (oNodeAttributes.getNamedItem("src")!=null){
   sSrc = oNodeAttributes.getNamedItem("src").value;   
  }
  else{
   sSrc = "";
  } 
  oLI.setAttribute("src", sSrc);
  //If src attribute is not empty or amount of the child nodes is not equals zero
 
  var teste
   
  if (sSrc!="" || sourceNode.childNodes(i).childNodes.length>0){
   //If sub nodes was not loaded
   if (sSrc!=""){
    oLI.setAttribute("LoadedChildren", "false");   
   }
   //If sub nodes are already loaded
   else{
    oLI.setAttribute("LoadedChildren", "true");
   }
   oIMG.src = sImagePlus;
   oLI.setAttribute("Expanded", "false");
   //Set action image event handler 
   oIMG.onclick = actionOnClick;

  } 
  else{
   oIMG.src = sImageNone;
   
  }
  //Create icon image
  oIMG = oNOBR.appendChild(oIMG);
  oIMG = document.createElement("[color=red]<[/color]img[color=red]>[/color]");
  oIMG.border = 0;
  oIMG.src = sImagesPath + sIcon + ".gif";
  oIMG = oNOBR.appendChild(oIMG);
  oA = document.createElement("[color=red]<[/color]a[color=red]>[/color]");
  if (sHref!=""){
   //oA.href = sBaseHref + sHref;
   oA.href = sHref;
   //Set event handler for node 
   oA.onclick = nodeOnClick;
   oA.onmouseover = nodeOnMouseOver;
   oA.onmouseout = nodeOnMouseOut;   
  } 
  if (sTarget!=""){
   oA.target = sTarget; 
  }
  oA.innerHTML = sName;
  if (sTitle!=""){
   oA.title = sTitle; 
  }
  oA.className = "treenode";
  oA = oNOBR.appendChild(oA);

  if (sourceNode.childNodes(i).childNodes.length>0)
  {
   //Assembly subtree
   buildTree(sourceNode.childNodes(i), oLI, "false")

  }
[b]  // Check if the atual node will be expanded
  if (oNodeAttributes.getNamedItem("expand").value == "true"){
   [color=red]AutoExpand_add(oLI)[/color] 
  }[/b]

}
//Add custom attributes to resultNode which specifies whether node loaded children or not and
//whether is was expanded or not
resultNode.setAttribute("LoadedChildren", "true")
resultNode.setAttribute ("Expanded", expanded);
}

//This function handle OnClick event on action image
function actionOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.parentNode.parentNode.getAttribute ("Expanded")=="true"){
  oNode.parentNode.parentNode.childNodes(1).style.display = "none";
  oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImagePlus;
  oNode.parentNode.parentNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
  //If children nodes are already loaded, just expand it
  if (oNode.parentNode.parentNode.getAttribute("LoadedChildren")=="true"){
   oNode.parentNode.parentNode.childNodes(1).style.display = "block";
   oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImageMinus; 
   oNode.parentNode.parentNode.setAttribute ("Expanded", "true")
  }
   //Children nodes are not loaded yet, we need to load it
  else{
   //If the other nodes are loaded at the current time, we should stop it
   if (loadingNode!=null){
    hideLoadingNode(loadingNode);
   }
   //Set new node
   loadingNode = oNode.parentNode.parentNode;
   //Show loading node
   showLoadingNode(loadingNode); 
   //Assembly subtree
   oXml.load(loadingNode.getAttribute("src"));
  }
}
}

[b][color=red]var AutoExpand_array = new Array();
var AutoExpand_array_pos = -1;

function AutoExpand_add(NODE_ID){
AutoExpand_array[AutoExpand_array.length] = NODE_ID;
}
function AutoExpand_next(){
if (AutoExpand_array_pos < AutoExpand_array.length-1){
  AutoExpand_array_pos++;
  AutoExpand(AutoExpand_array[AutoExpand_array_pos]);
}
}
function AutoExpand(oNode){ //This is the same function as the actionOnClick function. Just some changes.

event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.getAttribute ("Expanded")=="true"){
  oNode.parentNode.parentNode.childNodes(1).style.display = "none";
  oNode.childNodes(0).childNodes(0).src = sImagePlus;
  oNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
  //If children nodes are already loaded, just expand it
  if (oNode.getAttribute("LoadedChildren")=="true"){[/color]
   oNode.childNodes(1).style.display = "block";
   oNode.childNodes(0).childNodes(0).src = sImageMinus; 
   oNode.setAttribute ("Expanded", "true")
  [color=red]}
   //Children nodes are not loaded yet, we need to load it
  else{
   //If the other nodes are loaded at the current time, we should stop it
   if (loadingNode!=null){
    hideLoadingNode(loadingNode);
   }
   //Set new node
   loadingNode = oNode;
   //Show loading node
   showLoadingNode(loadingNode); 
   //Assembly subtree
   oXml.load(loadingNode.getAttribute("src"));
//   alert(loadingNode.getAttribute("src"))
  }
}
}[/color][/b]


//This function handles OnClick event on link

function nodeOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
if (oSelNode!=null)
{
  oSelNode.childNodes(0).childNodes(2).className = sNodeClass;
}
oSelNode = oNode.parentNode.parentNode;
oSelNode.childNodes(0).childNodes(2).className = sNodeSelOverClass;
//Add your code to handle this event
}

//This function handles OnMouseOver event on link
function nodeOnMouseOver(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = oNode.innerText;
if (oNode.className==sNodeSelClass){
  oNode.className = sNodeSelOverClass;
}
else{
  oNode.className = sNodeOverClass;
}
//Add your code to handle this event
}

//This function handles OnMouseOut event on link
function nodeOnMouseOut(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = "";
if (oNode.className==sNodeSelOverClass){
  oNode.className = sNodeSelClass;
}
else{
  oNode.className = sNodeClass;
}
//Add your code to handle this event
}

//This function handles OnClick event on loading node
function cancelLoad(){
var oNode
oNode = event.srcElement;
hideLoadingNode(oNode.parentElement);
loadingNode = null;
}


function initPage(){
oSelNode = null;
//set loadingNode to the tree container
loadingNode = document.all("Tree");
oXml = new ActiveXObject("Microsoft.XMLDOM");
//Change this property to false if you are working in synchronous mode
oXml.async = false;
//set handler for xml data loading event
oXml.onreadystatechange = onLoadXml;
//load root xml data source
oXml.load(sRootTree);
}

//This function parses and builds tree when XML data source has been loaded
function onLoadXml(){
//test if xml was fully loaded (COMPLETED(4))
if (oXml.readyState==4){
  hideLoadingNode (loadingNode); 
  //test if xml is well formed and contains other than documentElement nodes
  if ((oXml.parseError.reason[color=red]!=0[/color])){ 
   if (loadingNode!=document.all("Tree")){
    loadingNode.childNodes(0).childNodes(0).src = sImageMinus;
   }
   //Set sBaseHref which specifies the baseline URL
   sBaseHref = oXml.documentElement.attributes.getNamedItem("base").value;
   //Building treeview starts with documentElement of XML and loading node
   //We expand only one level of deep treeview, so we just pass "true" value in this call     
   buildTree(oXml.documentElement, loadingNode, "true"); 
  }
  else
  {
   //If subtree loading have been failed, change action image to none and remove event handler 
   loadingNode.childNodes(0).childNodes(0).src = sImageNone;
   loadingNode.childNodes(0).childNodes(0).onclick = null;
  }
  //Actions with loading node are finished, so set it to null
  loadingNode = null;
 
[b]  // Expand next node (this prevent loading node load just one node per time)
  [color=red]AutoExpand_next();[/color][/b]
   
}

  </script>
</head>
<body onload="initPage();">
<form action="../index.asp" method="get" name="form" id="form">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td> <div id="Tree"> </div>
        <%
id_setor = Request.QueryString("id_setor")
if id_setor = "" then
  id_setor = 1
end if
%>
        <script>
function abre_pagina(id_setor,id_pagina,id_tipo){
  id_setor_atual = <%=id_setor%>;
 
  if ((id_setor != null) && (id_pagina != null) && (id_tipo != null)){
   if (id_setor_atual == id_setor){
    if (id_tipo == 1){
     parent.mostra_editor(true,id_pagina);
    }
    else if (id_tipo == 2){
     parent.mostra_editor_url(true,id_pagina);
    }
   else
    {
     parent.abre_pagina('setor.asp?id='+id_setor)
    }
   }
  }
}
</script> </td>
    </tr>
  </table>
 
    <input type="submit" name="Submit" value="Submit">
 
</form>
</body>
</html>

simply do this:
Quote:
Code:
<!--
'*********************************************************************************
' COMobjects.NET Deep Tree Script(c) Fedor Skvortsov, COMobjects.NET. November, 2001
' Mailto: fed@comobjects.net
' WWW: http://comobjects.net
'*********************************************************************************
-->
<html>
<head>
  <style type="text/css">
LI
{
margin-left:-25px;
list-style-type:none;
list-style-image:none;
font-family:verdana;
font-size:8pt;
}
</style>
<link href="../../styles.css" rel="stylesheet" type="text/css">

<script type="text/javascript" language="jscript"> 
//Root Tree
var sRootTree = "TOC/Root.asp?id_setor=1"

//Images
var sImagesPath = "Images/";
var sImageNone = sImagesPath + "none.gif";
var sImagePlus = sImagesPath + "plus.gif";
var sImageMinus = sImagesPath + "minus.gif";
//Styles
var sNodeLoadingClass = "load";
var sNodeClass = "treenode";
var sNodeOverClass = "treenodeover";
var sNodeSelClass = "treenodesel"
var sNodeSelOverClass = "treenodeselover"
//Text
var sCancelLoad = "Abrindo...";

//XML Document which contains tree
var oXML;
//Base href for current loading node
var sBaseHref;
//Selected node
var oSelNode;
//Curent loading node. Only one node can be being loading at one moment!*/
var loadingNode;

//Show loading node [Loading...]
function showLoadingNode(Node){
var oDiv;
oDIV = document.createElement("div");
oDIV.className = sNodeLoadingClass;
Node.appendChild(oDIV);
oDIV.innerText = sCancelLoad;
oDIV.onclick = cancelLoad;

}

//Hide loading node
function hideLoadingNode(Node){
try{
  if (Node.childNodes.length>1){
   oDIV = Node.childNodes(1);
   Node.removeChild(oDIV);
  }
}
catch(x){}
}

//This function builds tree.
//Parameter sourceNode is a XML source node, resultNode is a produced HTML node,
//expanded specifies whether display resultNode  expanded or not.

function buildTree(sourceNode, resultNode, expanded){
var oLI, oUL, oIMG, oA, oNOBR, i, oNodeAttributes;
var sIcon, sName, sHref, sTitle, sTarget, sSrc;
//Create container for child nodes
oUL = document.createElement("ul");
resultNode.appendChild(oUL);
//if node expanded then display container
if (expanded=="true"){
  oUL.style.display="block";
}
else{
  oUL.style.display="none";
}
//Run over nodes in XML source
for (i=0;i<sourceNode.childNodes.length;i++){
  //Set obligatory values
  oNodeAttributes = sourceNode.childNodes(i).attributes;
  sIcon = oNodeAttributes.getNamedItem("icon").value;
  sName = oNodeAttributes.getNamedItem("name").value;
  //Set optional values
  if (oNodeAttributes.getNamedItem("href")!= null){
   sHref = oNodeAttributes.getNamedItem("href").value;
  }
  else{
   sHref = "";
  }
  if (oNodeAttributes.getNamedItem("title")!= null){
   sTitle = oNodeAttributes.getNamedItem("title").value;
  }
  else{
   sTitle = "";
  }
  if (oNodeAttributes.getNamedItem("target")!=null){
   sTarget = oNodeAttributes.getNamedItem("target").value;
  }
  else{
   sTarget = ""
  }
  //Create node
  oLI = document.createElement("li");
  oUL.appendChild(oLI);
  oNOBR = document.createElement("nobr");
  oLI.appendChild(oNOBR);
  //Create action image
  oIMG = document.createElement("img");
  oIMG.border = 0;
  //If src attribute is not empty, add custom attribute to the result node
  if (oNodeAttributes.getNamedItem("src")!=null){
   sSrc = oNodeAttributes.getNamedItem("src").value;   
  }
  else{
   sSrc = "";
  } 
  oLI.setAttribute("src", sSrc);
  //If src attribute is not empty or amount of the child nodes is not equals zero
 
  var teste
   
  if (sSrc!="" || sourceNode.childNodes(i).childNodes.length>0){
   //If sub nodes was not loaded
   if (sSrc!=""){
    oLI.setAttribute("LoadedChildren", "false");   
   }
   //If sub nodes are already loaded
   else{
    oLI.setAttribute("LoadedChildren", "true");
   }
   oIMG.src = sImagePlus;
   oLI.setAttribute("Expanded", "false");
   //Set action image event handler 
   oIMG.onclick = actionOnClick;

  } 
  else{
   oIMG.src = sImageNone;
   
  }
  //Create icon image
  oNOBR.appendChild(oIMG);
  oIMG = document.createElement("img");
  oIMG.border = 0;
  oIMG.src = sImagesPath + sIcon + ".gif";
  oNOBR.appendChild(oIMG);
  oA = document.createElement("a");
  if (sHref!=""){
   //oA.href = sBaseHref + sHref;
   oA.href = sHref;
   //Set event handler for node 
   oA.onclick = nodeOnClick;
   oA.onmouseover = nodeOnMouseOver;
   oA.onmouseout = nodeOnMouseOut;   
  } 
  if (sTarget!=""){
   oA.target = sTarget; 
  }
  oA.innerHTML = sName;
  if (sTitle!=""){
   oA.title = sTitle; 
  }
  oA.className = "treenode";
  oNOBR.appendChild(oA);

  if (sourceNode.childNodes(i).childNodes.length>0)
  {
   //Assembly subtree
   buildTree(sourceNode.childNodes(i), oLI, "false")

  }
[b]  // Check if the actual node will be expanded
  if (oNodeAttributes.getNamedItem("expand")){
        oNode.childNodes(1).style.display = "block";
           oNode.childNodes(0).childNodes(0).src = sImageMinus; 
           oNode.setAttribute ("Expanded", "true")
  }[/b]

}
//Add custom attributes to resultNode which specifies whether node loaded children or not and
//whether is was expanded or not
resultNode.setAttribute("LoadedChildren", "true")
resultNode.setAttribute ("Expanded", expanded);
}

//This function handle OnClick event on action image
function actionOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
//If node is already expanded we collapse it
if (oNode.parentNode.parentNode.getAttribute ("Expanded")=="true"){
  oNode.parentNode.parentNode.childNodes(1).style.display = "none";
  oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImagePlus;
  oNode.parentNode.parentNode.setAttribute ("Expanded", "false")
}
//If node is collapsed expand it
else{
  //If children nodes are already loaded, just expand it
  if (oNode.parentNode.parentNode.getAttribute("LoadedChildren")=="true"){
   oNode.parentNode.parentNode.childNodes(1).style.display = "block";
   oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImageMinus; 
   oNode.parentNode.parentNode.setAttribute ("Expanded", "true")
  }
   //Children nodes are not loaded yet, we need to load it
  else{
   //If the other nodes are loaded at the current time, we should stop it
   if (loadingNode!=null){
    hideLoadingNode(loadingNode);
   }
   //Set new node
   loadingNode = oNode.parentNode.parentNode;
   //Show loading node
   showLoadingNode(loadingNode); 
   //Assembly subtree
   oXml.load(loadingNode.getAttribute("src"));
  }
}
}

//This function handles OnClick event on link
function nodeOnClick(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
if (oSelNode!=null)
{
  oSelNode.childNodes(0).childNodes(2).className = sNodeClass;
}
oSelNode = oNode.parentNode.parentNode;
oSelNode.childNodes(0).childNodes(2).className = sNodeSelOverClass;
//Add your code to handle this event
}

//This function handles OnMouseOver event on link
function nodeOnMouseOver(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = oNode.innerText;
if (oNode.className==sNodeSelClass){
  oNode.className = sNodeSelOverClass;
}
else{
  oNode.className = sNodeOverClass;
}
//Add your code to handle this event
}

//This function handles OnMouseOut event on link
function nodeOnMouseOut(){
var oNode
oNode = event.srcElement;
event.cancelBubble = true;
window.status = "";
if (oNode.className==sNodeSelOverClass){
  oNode.className = sNodeSelClass;
}
else{
  oNode.className = sNodeClass;
}
//Add your code to handle this event
}

//This function handles OnClick event on loading node
function cancelLoad(){
var oNode
oNode = event.srcElement;
hideLoadingNode(oNode.parentElement);
loadingNode = null;
}


function initPage(){
oSelNode = null;
//set loadingNode to the tree container
loadingNode = document.all("Tree");
oXml = new ActiveXObject("Microsoft.XMLDOM");
//Change this property to false if you are working in synchronous mode
oXml.async = false;
//set handler for xml data loading event
oXml.onreadystatechange = onLoadXml;
//load root xml data source
oXml.load(sRootTree);
}

//This function parses and builds tree when XML data source has been loaded
function onLoadXml(){
//test if xml was fully loaded (COMPLETED(4))
if (oXml.readyState==4){
  hideLoadingNode (loadingNode); 
  //test if xml is well formed and contains other than documentElement nodes
  if ((oXml.parseError.reason[color=red]!=0[/color])){ 
   if (loadingNode!=document.all("Tree")){
    loadingNode.childNodes(0).childNodes(0).src = sImageMinus;
   }
   //Set sBaseHref which specifies the baseline URL
   sBaseHref = oXml.documentElement.attributes.getNamedItem("base").value;
   //Building treeview starts with documentElement of XML and loading node
   //We expand only one level of deep treeview, so we just pass "true" value in this call     
   buildTree(oXml.documentElement, loadingNode, "true"); 
  }
  else
  {
   //If subtree loading have been failed, change action image to none and remove event handler 
   loadingNode.childNodes(0).childNodes(0).src = sImageNone;
   loadingNode.childNodes(0).childNodes(0).onclick = null;
  }
  //Actions with loading node are finished, so set it to null
  loadingNode = null;   
}

  </script>
</head>
<body onload="initPage();">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td> <div id="Tree"> </div>
       </td>
    </tr>
  </table>

</form>
</body>
</html>

Version for IE & Mozilla/Firefox will follow next Days.
Fedor
Posted: Friday, October 14, 2005 6:28:26 AM

Rank: Advanced Member
Groups: Administration , Member

Joined: 7/28/2003
Posts: 1,185
Points: -358
Location: WA, US
Yes,I confirm the errors in code. I am sorry, I have not tested and verified the code.

Best regards,
Fedor Skvortsov
Phoenix
Posted: Saturday, October 15, 2005 6:21:37 AM
Rank: Member
Groups: Member

Joined: 10/13/2005
Posts: 2
Points: 0
why i have no rights, to edit my post?
Code:
function onLoadXml(){
...
oXml.parseError.[b]reason[/b]!=0

should be replaced by
Code:
oXml.parseError.[b]errorCode[/b]!=0
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Main Forum RSS : RSS

YAFVision Theme Created by Jaben Cargman (Tiny Gecko)
Yet Another Forum.net version 1.9.1.6 running under Cuyahoga.
Copyright © 2003-2006 Yet Another Forum.net. All rights reserved.