jueves, 23 de julio de 2009

Javascipt Tree with Jquery and Ajax

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;}}

No hay comentarios:

Publicar un comentario