輝念了崔: 遍匈 > web蝕窟 > jQuery > 屎猟

jQuery TreeView

扮寂:2010-06-30 鴬人坩 W2N

孀阻匯倖jQuery議峯侘峨周徭失耶紗阻奐、評、個、臥嚥方象垂住札(SQL Server 2005)。

屶隔3蚊准泣勣制婢匆辛參旺音頼鋲散哭戻竃吭需

舜夕

人薩極麼勣旗鷹

<div id="divMove">
    <input id="btnAdd" type="button" value="耶紗" /><input id="btnDel" type="button" value="評茅" /></div>
<div id="divTree">
    <ul id="red" class="treeview-red">
    </ul>
</div>

參朔延厚議峯侘坪否脅壓ul和中。

麼勣議js猟周旗鷹

//--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";
        });
    }
});