Just so i dont forget to post it and explain further when i have sometime!
Jquery is used for performing the ajax part and the show/hide effects
although i could've used yaguajax (http://code.google.com/p/yaguajax) I decided to use jquery because of the showing/hiding effects, well anyways, this is a tree that takes a JSON object as parameter 1 (data), ill provide more examples in the future!
CSS
-----------------------
ul li a {
}
.level {display:none;}
.level1{display:none;}
.level2 {display:none;}
JAVASCRIPT
-----------------------
tree={branches:[],parse:function(data,id,fieldName,lvlPrefix,lvlField,lvlClass,jsFunc,branchTitle){var div=document.getElementById(id);var ul=document.createElement("ul");if(branchTitle){var li=document.createElement("li");li.setAttribute("class","treetitle");li.appendChild(document.createTextNode(branchTitle));ul.appendChild(li);}if(!this.hasbranch(id))this.branches[id]={data:data,expanded:false};for(i=0;i<data.length;i++){var val=data[i][fieldName];var lvlID=lvlPrefix+data[i][lvlField];if(!val) continue;var li=document.createElement("li");var a=document.createElement("a");var txt=document.createTextNode(val);var lvl=document.createElement("div");lvl.id=lvlID;lvl.setAttribute("class",lvlClass);a.appendChild(txt);a.href="javascript:"+jsFunc+"("+$.toJSON(data[i])+");";li.appendChild(a);li.appendChild(lvl);ul.appendChild(li);}div.appendChild(ul);this.expandContract(id);},hasbranch:function(id){return (!(typeof(this.branches[id])=="undefined"));},expandContract:function(id){if(!this.hasbranch(id))return false;if (this.branches[id].expanded){$("#"+id).hide("slow");this.branches[id].expanded=false;return;}$("#"+id).show("slow");this.branches[id].expanded=true;return;}}
Mostrando entradas con la etiqueta Javascript Tree Ajax Jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript Tree Ajax Jquery. Mostrar todas las entradas
jueves, 23 de julio de 2009
Suscribirse a:
Entradas (Atom)
