asp.net+ajax+jQ实现树动态创建

用javascript+asp.net的一般处理程序， 实现树的动态创建，点击上一层异步加载下一层

 

 

代码如下：

 

 

var TreeObj;

function MenuTree(treeItemId,imgPath)

{

    this.treeItemObj = $("#"+treeItemId);

 

    this.nodeId = 0;

 

    this.imgPath = imgPath;

    this.imgBlank = "blank.gif";

    this.imgVerticalLine = "line1.gif";

    this.imgUpLine = "line2.gif";

    this.imgTLine = "line3.gif";

    this.imgRootAdd = "plus5.gif";

    this.imgUpAdd = "plus2.gif";

    this.imgDownAdd = "plus4.gif";

    this.imgTAdd = "plus3.gif";

    this.imgRootMinus = "minus5.gif";

    this.imgUpMinus = "minus2.gif";

    this.imgDownMinus = "minus4.gif";

    this.imgTMinus = "minus3.gif";

    this.imgLineMiddle = "line3.gif";

 

    this.imgCZ = "house.bmp";

    this.imgCJQ = "cjq.bmp";

    this.imgDB="REPORT.bmp";

 

    this.imgFolderClose = "folderClosed.gif";

    this.imgFolderOpen = "folderOpen.gif";

 

    this.initTree();

}

//初始化树

MenuTree.prototype.initTree = function()

{

    TreeObj = this;

    if(this.treeItemObj != null && this.treeItemObj.innerText !="")

    {

        var rootUl = $("ul",this.treeItemObj)[0];

        if(rootUl != "undefined" && rootUl != null && rootUl.innerHTML !="")

        {

            this.loadTree(rootUl,"");

        }

    }

}

MenuTree.prototype.loadTree = function(ulObj)

{

    for(var i=0;i<ulObj.childNodes.length;i++)

    {

        if(ulObj.childNodes[i].nodeType == "1" && ulObj.childNodes[i].tagName.toLowerCase() == "li")

        {

            TreeObj.nodeId = TreeObj.nodeId + 1;

 

            var liTag = ulObj.childNodes[i];

            liTag.className = "folder_close";

 

            var spanTag = $($("span",liTag)[0]);

            spanTag.attr("id","spanMenu"+TreeObj.nodeId);

            spanTag.hasClass("default");

            spanTag.attr("unselectable", "on");

            spanTag.bind("mouseover",TreeObj.treeItemMouseOver);

            spanTag.bind("mouseout", TreeObj.treeItemMouseOut);

//            spanTag.bind("click",TreeObj.treeItemClick);

            //右键菜单

            spanTag.contextMenu('rightMenu',{

                bindings:{

                    'add':function(t){

                        addFunc(t);

                    },

                    'del':function(t){

                        delFunc(t);

                     }

                }

            });

           var imgTag = $("<img />");

           if(i == 0)

           {

                imgTag.attr("src",TreeObj.imgPath + TreeObj.imgDownAdd);

                imgTag.addClass("folder_top");

           }

           if(i == ulObj.childNodes.length - 1)

           {

                imgTag.attr("src",TreeObj.imgPath + TreeObj.imgUpAdd);

                imgTag.addClass("folder_bottom");

            }

            else

            {

                imgTag.attr("src", TreeObj.imgPath + TreeObj.imgTAdd);

                imgTag.addClass("folder_middle");

            }

            imgTag.attr("alt","展开");

            imgTag.bind("click",TreeObj.folderClick);

            imgTag.insertBefore(spanTag);

 

            var imgCZ = $("<img />");

            imgCZ.attr("src",TreeObj.imgPath+TreeObj.imgFolderOpen);

            imgCZ.insertBefore(spanTag);

 

//            var ulTag = $($("ul",liTag)[0]);

//            if(ulTag != "undefined" && ulTag != null && ulTag.innerHTML !="")

//            {

//                TreeObj.subTreeInite(ulTag);

//            }

        }

     }

}

//新增数据

function addFunc(e)

{

    var liTag = e.parentNode;

    var inputTag=$("input",liTag);

    var kind = inputTag.attr("class");

    var parentText = $(e)[0].innerText;

 

    var czlb = $("#ddlKind").val();

    var lbID = inputTag.val();

    var ssgx = $("#ddlSSGX").find("option:selected")[0].text;

    if(ssgx == "所有区县")

        ssgx ="";

    switch(kind)

    {

        case "0":

            $("#divCZ").show();

            $("#divCJQ").hide();

            $("#divDB").hide();

            switch(czlb)

            {

                case "YHFL":

                     var count = $("#czlb").find("option").size();

                     for(var i =0;i<count;i++)

                     {

                        if($("#czlb").find("option")[i].text == parentText)

                        {

                            $("#czlb").find("option")[i].selected = true;

                            break;

                        }

                     }

                     $("#yylb").find("option:value='-1'").selected = true;

                     $("#hyfl").find("option:value='-1'").selected = true;

                     $("#czdj").find("option:value='-1'").selected = true;

                     var ssgxTag = $("#ssgx");

                     ssgxTag.bind("focus",function(){ssgxInit(this);});

//                     var ssgxCount = $("#ssgx").find("option").size();

//                     for(var i =0;i<count;i++)

//                     {

//                        if($("#ssgx").find("option")[i].text == ssgx)

//                        {

//                            $("#ssgx").find("option")[i].selected = true;

//                            break;

//                        }

//                     }

                    break;

                case "HYLB":

                    var count = $("#hyfl").find("option").size();

                     for(var i =0;i<count;i++)

                     {

                        if($("#hyfl").find("option")[i].text == parentText)

                        {

                            $("#hyfl").find("option")[i].selected = true;

                            break;

                        }

                     }

                     $("#ssgx").find("option:value='-1'").selected = true;

                      $("#yylb").find("option:value='-1'").selected = true;

                      $("#czdj").find("option:value='-1'").selected = true;

                     var ssgxCount = $("#ssgx").find("option").size();

                     for(var i =0;i<count;i++)

                     {

                        if($("#ssgx").find("option")[i].text == ssgx)

                        {

                            $("#ssgx").find("option")[i].selected = true;

                            break;

                        }

                     }

                    break;

                case "YYFL":

                    var count = $("#yylb").find("option").size();

                     for(var i =0;i<count;i++)

                     {

                        if($("#yylb").find("option")[i].text == parentText)

                        {

                            $("#yylb").find("option")[i].selected = true;

                            break;

                        }

                     }

                     $("#ssgx").find("option:value='-1'").selected = true;

                     $("#hyfl").find("option:value='-1'").selected = true;

                      $("#czdj").find("option:value='-1'").selected = true;

                     var ssgxCount = $("#ssgx").find("option").size();

                     for(var i =0;i<count;i++)

                     {

                        if($("#ssgx").find("option")[i].text == ssgx)

                        {

                            $("#ssgx").find("option")[i].selected = true;

                            break;

                        }

                     }

                    break;

            }

            break;

        case "1":

            $("#divCZ").hide();

            $("#divCJQ").show();

            $("#divDB").hide();

            break;

        case "2":

            $("#divCZ").hide();

            $("#divCJQ").hide();

            $("#divDB").show();

            break;

    }

}

 

function ssgxInit(e)

{

    $(e).empty();

    var optionItem0 = $("<option></option>");

    optionItem0.attr("value",-1);

    var content0 = "";

    optionItem0.append(content0);

    $(e).append(optionItem0);

 

    var optionItem = $("<option></option>");

    optionItem.attr("value",1);

    var content = "海淀区";

    optionItem.append(content);

    $(e).append(optionItem);

}

//删除数据

function delFunc(e)

{

    var liTag = e.parentNode;

    var inputTag=$("input",liTag);

    alert(inputTag.attr("value")+"--删除逻辑");

}

//构造子树

MenuTree.prototype.subTreeInite = function(liBlock)

{

    var liList = $("li",liBlock);

    liList.each(function(){

        var liTag=this;

        liTag.className = "folder_close";

        var spanTag = $("span",liTag);

        spanTag.bind("mouseover",TreeObj.treeItemMouseOver);

        spanTag.bind("mouseout", TreeObj.treeItemMouseOut);

        spanTag.bind("click",TreeObj.treeItemClick);

        //右键菜单

        spanTag.contextMenu("rightMenu",{

            bindings:{

                'add':function(t){

                    addFunc(t);

                },

                'del':function(t){

                    delFunc(t);

                }

             }

        });

        var level = $("input:hidden",liTag).attr("class");

 

        var img1 = $("<img />");

        img1.attr("src",TreeObj.imgPath + TreeObj.imgVerticalLine);

        img1.insertBefore(spanTag);

 

        switch(level)

        {

            case "1":

                var imgTag = $("<img />");

                imgTag.attr("alt","展开");

                imgTag.attr("src", TreeObj.imgPath + TreeObj.imgTAdd);

                imgTag.addClass("folder_middle");

                imgTag.bind("click",TreeObj.folderClick);

                imgTag.insertBefore(spanTag);

                var imgCZ = $("<img />");

                imgCZ.attr("src",TreeObj.imgPath+TreeObj.imgCZ);

                imgCZ.insertBefore(spanTag);

                break;

            case "2":

                var img2 = $("<img />");

                img2.attr("src",TreeObj.imgPath + TreeObj.imgVerticalLine);

                img2.insertBefore(spanTag);

                var imgTag = $("<img />");

                imgTag.attr("src", TreeObj.imgPath + TreeObj.imgTAdd);

                imgTag.bind("click",TreeObj.folderClick);

                imgTag.addClass("folder_middle");

                imgTag.insertBefore(spanTag);

                var imgCZ = $("<img />");

                imgCZ.attr("src",TreeObj.imgPath+TreeObj.imgCJQ);

                imgCZ.insertBefore(spanTag);

                break;

            case "3":

                var img2 = $("<img />");

                img2.attr("src",TreeObj.imgPath + TreeObj.imgVerticalLine);

                img2.insertBefore(spanTag);

                 var img3 = $("<img />");

                img3.attr("src",TreeObj.imgPath + TreeObj.imgVerticalLine);

                img3.insertBefore(spanTag);

                var imgTag = $("<img />");

                imgTag.attr("src", TreeObj.imgPath + TreeObj.imgLineMiddle);

                imgTag.addClass("folder_middle");

                imgTag.insertBefore(spanTag);

                var imgCZ = $("<img />");

                imgCZ.attr("src",TreeObj.imgPath+TreeObj.imgDB);

                imgCZ.insertBefore(spanTag);

                break;

         }

        });

}

//鼠标移动事件

MenuTree.prototype.treeItemMouseOver=function()

{

    var mouseObj = $(this);

    mouseObj.css("text-decoration","underline");

    mouseObj.css("cursor","hand");

}

//鼠标移出事件

MenuTree.prototype.treeItemMouseOut = function()

{

    var mouseObj = $(this);

 

     mouseObj.css("text-decoration","none");

     mouseObj.css("cursor","pointer");

}

//树节点点击事件

MenuTree.prototype.treeItemClick = function()

{

    var liTag = $(this).parent();

    var inputTag = liTag.children("input");

    var id = inputTag.attr("value");

    var kind = inputTag.attr("class");

    var divRight = $("#divRight");

//    divRight.empty();

    var imgLoad = $("<img />");

    imgLoad.attr("src","../../Images/Loader/loading.gif");

//    divRight.append(imgLoad);

 

    $.ajax({

        type:"GET",

        url:"ArchiveData.ashx",

        data:"id="+id+"&k="+kind,

        success:function(msg){

            showData(kind,msg);

        }

    });

}

function showData(k,msg)

{

    var dataList = msg.split("@@");

    switch(k)

    {

        case "1":

            $("#divCZ").show();

            $("#divCJQ").hide();

            $("#divDB").hide();

            $("#czName").val(dataList[0]);

            $("#czfl").val(dataList[1]);

            break;

         case "2":

            $("#divCZ").hide();

            $("#divCJQ").show();

            $("#divDB").hide();

            break;

         case "3":

            $("#divCZ").hide();

            $("#divCJQ").hide();

            $("#divDB").show();

            break;

         default:

            break;

    }

}

//点击展开图标

MenuTree.prototype.folderClick = function()

{

    var liTag = $(this).parent();

    var level = liTag.children("input").attr("class");

    var id = liTag.children("input").val();

    var kind = $("#ddlKind").val();

    var ssqx = $("#ddlSSGX").val();

 

//    debugger

    var childList = liTag.children();

    var exist="no";

    //判断是否已经有子树

    childList.each(function(){

       if(this.tagName.toLowerCase()=="ul"){

           exist = "yes";

           return false;

       }

    })

    if(exist=="no")

    {

        var ulTag = $("<ul></ul>");

        var liLoad=$("<li></li>");

        var imgLoad = $("<img />");

        imgLoad.attr("src","../../Images/Loader/loading.gif");

        liLoad.append(imgLoad);

        for(var i=0;i<=level;i++)

        {

            var imgEmpty1=$("<img />");

            imgEmpty1.attr("src",TreeObj.imgPath + TreeObj.imgBlank);

            liLoad.prepend(imgEmpty1);

         }

        ulTag.append(liLoad);

        liTag.append(ulTag);

        $.ajax({

            type:"GET",

            url:"ArchiveSubTree.ashx",

            data:"l="+level+"&k="+escape(kind)+"&s="+escape(ssqx)+"&id="+id,

            success:function(msg){

                ulTag.empty();

                ulTag.append(msg);

                TreeObj.subTreeInite(liTag);

            }

        });

        $(childList[parseInt(level)]).attr("src",TreeObj.imgPath + TreeObj.imgTMinus);

        $(childList[parseInt(level)]).attr("alt","闭合");

    }

    if(liTag.hasClass("folder_close"))

    {

        liTag.removeClass();

        liTag.className = "folder_open";

        var dd = childList[parseInt(level)];

        $(childList[parseInt(level)]).attr("src", TreeObj.imgPath + TreeObj.imgTMinus);

        $(childList[parseInt(level)]).attr("alt","闭合");

        $("ul",liTag).show();//li标签

        $("li",liTag).show();//ul标签

    }

    else

    {   

        liTag.removeClass();

        liTag.addClass("folder_close");

        $(childList[parseInt(level)]).attr("src",TreeObj.imgPath + TreeObj.imgTAdd);

        $(childList[parseInt(level)]).attr("alt","展开");

        $("ul",liTag).hide();//li标签

        $("li",liTag).hide();//ul标签

    }

}