jQueryTreeView

//--Author:Vincent
$(document).ready(function(){　　　
//bulid xmlHttpRequest
　　　 var xmlHttp;
　　　 var oClick;//which mouse up
　　　 if(window.ActiveXObject)
　　　 {
　　　　　　　 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　 }
　　　 else if(window.XMLHttpRequest)
　　　 {
　　　　　　　 xmlHttp=new XMLHttpRequest();
　　　 }
　　　 var post="op=2";//bind data from database
　　　 var url=document.location.href;
　　　 xmlHttp.open("POST",url,true);
　　　 xmlHttp.onreadystatechange=callback;
　　　 xmlHttp.setRequestHeader("Content-Length",post.length);
　　　 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　 xmlHttp.send(post);　　
　　　　　　　　
　　　 //add
　　　 $("#btnAdd").click(function(event){
//　　　　　　　 var oUL=document.getElementById("red");
//　　　　　　　 var oLI=document.createElement("li");
//　　　　　　　 var oInput=document.createElement("input");
//　　　　　　　
//　　　　　　　 oInput.setAttribute("class","treenode");
//　　　　　　　 oInput.setAttribute("value","New Node");
//　　　　　　　 oInput.setAttribute("type","text");
//　　　　　　　
//　　　　　　　 oLI.appendChild(oInput);
//　　　　　　　 oUL.appendChild(oLI);
　　　　　　　 var oNode=oClick;
　　　　　　　 var array=new Array();
　　　　　　　　　　　　　
　　　　　　　 for(var i=0;i<document.childNodes.length;i++)
　　　　　　　 {
　　　　　　　　　　　 if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
　　　　　　　　　　　　　　　 array[i]=oo;
　　　　　　　　　　　　　　　 oNode=oNode.parentNode.parentNode;
　　　　　　　　　　　 }
　　　　　　　　　　　 else
　　　　　　　　　　　　　　　 break;
　　　　　　　 }
　　　　　　　 if(array.length==0)
　　　　　　　 {
　　　　　　　　　　　 post="op=1&sort="+oClick.value+"|NewNode1.0|NewNode1.0.0";
　　　　　　　 }
　　　　　　　 else if(array.length==1)
　　　　　　　 {
　　　　　　　　　　　 post="op=1&sort="+array[0]+"|"+oClick.value+"|NewNode1.0.0";
　　　　　　　 }
　　　　　　　 else if(array.length==2)
　　　　　　　 {
　　　　　　　　　　　 post="op=1&sort="+array[1]+"|"+array[0]+"|NewNode1.0.0";
　　　　　　　 }
　　　　　　　
　　　　　　　 //post="op=1&sort=NewNode1.0|NewNode1|NewNode1.0.0";//add new data
　　　　　　　 xmlHttp.open("POST",url,true);
　　　　　　　 xmlHttp.onreadystatechange=callback;
　　　　　　　 xmlHttp.setRequestHeader("Content-Length",post.length);
　　　　　　　 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　　　　　 xmlHttp.send(post);
　　　 });
　　　 //delete
　　　 $("#btnDel").click(function(event){
　　　　　　　
　　　　　　　 if(confirm('Are you sure to clear or delete?'))
　　　　　　　 {　　
　　　　　　　　　　　 var oNode=oClick;
　　　　　　　　　　　 var array=new Array();
　　　　　　　　　　　　　
　　　　　　　　　　　 for(var i=0;i<document.childNodes.length;i++)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
　　　　　　　　　　　　　　　　　　　 array[i]=oo;
　　　　　　　　　　　　　　　　　　　 oNode=oNode.parentNode.parentNode;
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　　　　　 break;
　　　　　　　　　　　 }
　　　　　　　　　　　 post="op=4&sort=";
　　　　　　　　　　　
　　　　　　　　　　　 for(var i=0;i<array.length;i++)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 post+=array[i]+"|";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　 if(i==array.length-1)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 post=post.substring(0,post.length-1)+"|"+oClick.value;
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　 }
　　　　　　　　　　　 if(array.length==0)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 alert('Can not to be deleted!');
　　　　　　　　　　　　　　　 return;
　　　　　　　　　　　 }
　　　　　　　　　　　 xmlHttp.open("POST",url,true);
　　　　　　　　　　　 xmlHttp.onreadystatechange=callback;
　　　　　　　　　　　 xmlHttp.setRequestHeader("Content-Length",post.length);
　　　　　　　　　　　 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　　　　　　　　　 xmlHttp.send(post);
　　　　　　　 }
　　　 });
　　　 //web visit callback
　　　 function callback()
　　　 {
　　　　　　　 if(xmlHttp.readystate==4)
　　　　　　　 {
　　　　　　　　　　　 if(xmlHttp.status==200)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 display();
　　　　　　　　　　　 }
　　　　　　　　　　　 else
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 alert("Server Back Status:"+xmlHttp.statusText);
　　　　　　　　　　　 }
　　　　　　　 }
　　　　　　　 else//status is not success
　　　　　　　 {
　　　　　　　　　　　 document.getElementById("red").innerHTML="Data Loading";
　　　　　　　 }
　　　 }
　　　 function display()
　　　 {
　　　　　　　 var index=xmlHttp.responseText.indexOf("<!DOCTYPE");
　　　　　　　 var html=xmlHttp.responseText.substring(0,index);
　　　　　　　 document.getElementById("red").innerHTML=html;
　　　　　　　
　　　　　　　 reset();
　　　 }
　　　　　　　
　　　 function reset()
　　　 {　　　
　　　　　　　 $("#red").treeview({
　　　　　　　　　　　 animated: "fast",
　　　　　　　　　　　 collapsed: true,
　　　　　　　　　　　 unique: true,
　　　　　　　　　　　 persist: "cookie",
　　　　　　　　　　　 toggle: function() {
　　　　　　　　　　　　　　　 window.console && console.log("%o was toggled", this);
　　　　　　　　　　　 }
　　　　　　　 });
　　　
　　　　　　　 //double click textbox
　　　　　　　 $("#divTree input").dblclick(function(event){
　　　　　　　　　　　 $(this).addClass("focus");
　　　　　　　　　　　
　　　　　　　　　　　 var oDiv=document.getElementById("divMove");
　　　　　　　　　　　 oDiv.style.display="none";
　　　　　　　 });
　　　　　　　 //textbox mouseout
　　　　　　　 $("#divTree input").mouseout(function(event){
　　　　　　　　　　　 $(this).removeClass("focus");
　　　　　　　 });
　　　　　　　
　　　　　　　 //textbox enter
　　　　　　　 $("#divTree input").keydown(function(event){
　　　　　　　　　　　 if(event.keyCode==13)
　　　　　　　　　　　 {
　　　　　　　　　　　　　　　 $(this).removeClass("focus");
　　　　　　　　　　　
　　　　　　　　　　　　　　　 var oNode=this;
　　　　　　　　　　　　　　　 var array=new Array();
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　 for(var i=0;i<document.childNodes.length;i++)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
　　　　　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　　　　　 var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
　　　　　　　　　　　　　　　　　　　　　　　 array[i]=oo;
　　　　　　　　　　　　　　　　　　　　　　　 oNode=oNode.parentNode.parentNode;
　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　　　　　　　　　 break;
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　 post="op=3&sort=";
　　　　　　　　　　　
　　　　　　　　　　　　　　　 for(var i=0;i<array.length;i++)
　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　 post+=array[i]+"|";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　 if(i==array.length-1)
　　　　　　　　　　　　　　　　　　　 {
　　　　　　　　　　　　　　　　　　　　　　　 post=post.substring(0,post.length-1)+"|"+this.value+"|"+this.defaultValue;
　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　 if(array.length==0) post+=this.value+"|"+this.defaultValue;
　　　　　　　　　　　　　　　 xmlHttp.open("POST",url,true);
　　　　　　　　　　　　　　　 xmlHttp.onreadystatechange=callback;
　　　　　　　　　　　　　　　 xmlHttp.setRequestHeader("Content-Length",post.length);
　　　　　　　　　　　　　　　 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　　　　　　　　　　　　　 xmlHttp.send(post);
　　　　　　　　　　　 }
　　　　　　　 });
　　　
　　　　　　　 $(".treenode").mouseup(function(event){
　　　　　　　
　　　　　　　　　　　 var oDiv=document.getElementById("divMove");
　　　　　　　
　　　　　　　　　　　 oDiv.style.left=event.clientX;
　　　　　　　　　　　 oDiv.style.top=event.clientY;
　　　　　　　　　　　 oDiv.style.display="block";
　　　　　　　
　　　　　　　　　　　 oClick=$(this).get(0);
　　　　　　　　　　　 //alert(event.clientY+" "+event.clientX);
　　　　　　　
　　　　　　　 });
　　　　　　　 $("#divTree").mouseover(function(event){
　　　　　　　　　　　 var oDiv=document.getElementById("divMove");
　　　　　　　　　　　 oDiv.style.display="none";
　　　　　　　 });
　　　 }
});