Rank: Member
Groups: Member
Joined: 10/13/2005(UTC)
Posts: 2
|
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. Edited by user Sunday, December 23, 2007 5:13:03 PM(UTC)
| Reason: Not specified
|