En si deben estar relacionados por el ID no por el valor que representa, se me ocurrio este ejemplo, este ejemplo NO es muy eficiente ya que se reccorren todos los nodos de niveles inferiores para conocer los hijos , pero dada tu estructura creo yo que en algun momento puedes tener más de un hijo en cada nodo. Espero y sea de tu utilidad.
Saludos.
Código Javascript
:
Ver original<html>
<head>
<script language="javascript">
var aPuestosPred=new Array();
function f_dibujaArbol(){
var vsArbol = "";
//Estos deben de generarse desde el servidor
aPuestosPred[0] = [100,0,"padre"];
aPuestosPred[1] = [101,100,"hijo"];
aPuestosPred[2] = [108,100,"hijo 2"];
aPuestosPred[3] = [94,101,"nieto"];
aPuestosPred[4] = [95,108,"nieto"];
aPuestosPred[5] = [96,108,"nieto2"];
aPuestosPred[6] = [104,94,"biznieto"];
aPuestosPred[7] = [102,95,"biznieto"];
vsArbol = f_dibujaRama(aPuestosPred[0][0]);//se envia el id del nodo a dibuar los hijos
document.getElementById("div_arbol").innerHTML = vsArbol;
}
function f_dibujaRama(id){
var vsHijo = aPuestosPred[f_buscaEnArray(id)][2] + " Padre: " + aPuestosPred[f_buscaEnArray(id)][1] + " -- Id hijo: " + aPuestosPred[f_buscaEnArray(id)][0] + "<br></br>";
var aHijos = f_fieneHijos(id);
var f_hijos="";
for(var i = 0; i < aHijos.length; i++)
f_hijos += "f_dibujaRama(" + aHijos[i] + ") +"; // de manera recursiva se llaman a los dibijar los hijos del nodo actual
if(f_hijos.length>0)
return vsHijo + eval(f_hijos.substring(0,f_hijos.length-1));
return vsHijo;
}
function f_fieneHijos(id){
var vsHijos = new Array();
for(var i = 0; i < aPuestosPred.length; i++){
if(aPuestosPred[f_buscaEnArray(id)][0]==aPuestosPred[i][1])
vsHijos.push(aPuestosPred[i][0]);
}
return vsHijos;
}
function f_buscaEnArray(id){
for(var i = 0; i< aPuestosPred.length; i++){
if(aPuestosPred[i][0]==id)
return i;
}
return -1;
}
</script>
</head>
<body>
<div id="div_arbol"></div>
<input type="button" value="dibujaArbol" onclick="f_dibujaArbol();"/>
</body>
</html>