javascript與jquery混合而成的動態無限樹形結構的菜單

前台代碼如下：主要就是ajax的實現

  <script type="text/javascript" language="javascript">
$(initMenuInfo);
     function initMenuInfo()
      {
      var tbody = "";
      $.ajax({
      type: "GET",
      dataType: "json",
      url: 'Tree.aspx',
      data: "s=1", 
      error: function(){
           tbody="資料載入失敗";
           $("#menu").append(tbody);
          },
                success: function(data) {
                    var menus = data.menuModels;
                    $.each(menus, function(i, menu) {
                        if(menu!=null)
                        {
                        var divstr="div"+menu.ModuleId;
                        var trs = "";
                        trs +='<div id="'+divstr+'">';
                        trs += '<a href="#" class="menuover"  title="' + menu.ModuleName + '" onclick="node

                        ('+menu.ModuleId+');">';
                        trs +=menu.ModuleName+'</a>';
                        trs +='</div>';
                        tbody += trs;
                        }
                    });
                     if(tbody=="")
                        tbody="暫無資料";
                    $("#menu").addClass("hasload").append(tbody);
                    },
                 complete: function(XMLHttpRequest, textStatus){
                
                }
    
      });
      }
     function node(id){
      var divId="div"+id.toString();
      var tbody1 = "";
      if(!$("#"+divId+"").hasClass("hasload"))
      {
      $.ajax({
      type: "GET",
      dataType: "json",
      url: 'Tree.aspx',
      data: "f=2&id=" + id,
      error: function(){
           tbody1="資料載入失敗";
          $("#"+divId+"").append(tbody1);
          },
                success: function(data) {
                    var menus = data.menuModels;
                    $.each(menus, function(i, menu) {
                        if(menu!=null)
                        {
                        var divstr="div"+menu.ModuleId;
                        var trs1 = "";
                        trs1+='<div class="menuover" id="'+divstr+'">';
                        trs1 += '<a href="#"  title="' + menu.ModuleName + '" onclick="node

                       ('+menu.ModuleId+');">';
                        trs1 +=menu.ModuleName+'</a>';
                        trs1 +='</div>';
                        tbody1 += trs1;
                        }
                    });
                     if(tbody1!="")
                    $("#"+divId+"").addClass("hasload").append(tbody1);
                    },
                 complete: function(XMLHttpRequest, textStatus){
                
                }
    
      });
      }
      else
      {
        $("#"+divId+">div").toggle();
        $("#"+divId+">div>div").hide();
    // if(document.getElementById(divId).getElementsByTagName("div")[0].className=="menuover")
    // {
    // alert("aa");
    // for(j=0; j<document.getElementById(divId).getElementsByTagName("div").length; j++)
    // {
     //var obj=document.getElementById(divId).getElementsByTagName("div")[j];
    // obj.className=obj.className.replace("menuover", "menuhide");
    // }
   
     //}
    // else
     //{
    // for(j=0; j<document.getElementById(divId).getElementsByTagName("div").length; j++)
    // {
    // var obj=document.getElementById(divId).getElementsByTagName("div")[j];
    // obj.className=obj.className.replace("menuhide", "menuover");
  
    //}
    //}
    
      }
            }

    </script>

    <div id="menu" >
    </div>

後台代碼如下：主要是構建json對象

 protected void Page_Load(object sender, EventArgs e)
    {
      if( Request.QueryString["s"] == "1")
        {
            GetFirstMenu();
        }
      if (Request.QueryString["f"] == "2")
      {
          int nodeId = int.Parse(Request.QueryString["id"]);
          GetLastMenu(nodeId);
      }
    }
    public void GetFirstMenu()
    {

        DataSet ds = new DataSet();
        string strsql = "select * from Menu where ParentID=0";
        ds = DbHelper.Query(strsql);
        if(ds!=null)
        {
        List<MenuModel> MenuModels = new List<MenuModel>();
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            MenuModel menumodel = new MenuModel();
            menumodel.ModuleId = int.Parse(ds.Tables[0].Rows[i]["ModuleId"].ToString());
            menumodel.ModuleName = ds.Tables[0].Rows[i]["ModuleName"].ToString();
            menumodel.ParentID = int.Parse(ds.Tables[0].Rows[i]["ParentID"].ToString());
            menumodel.IsPage = bool.Parse(ds.Tables[0].Rows[i]["IsPage"].ToString());
            menumodel.UrlAddress = ds.Tables[0].Rows[i]["UrlAddress"].ToString();
            MenuModels.Add(menumodel);

        }
        string jsonstr = GetJsonStr(MenuModels);
        Response.Write(jsonstr);
        Response.End();
        }
    }
    public void GetLastMenu(int id)
    {

        DataSet ds = new DataSet();
        string strsql = "select * from Menu where ParentID='"+id+"'";
        ds = DbHelper.Query(strsql);
        if (ds != null)
        {
            List<MenuModel> MenuModels = new List<MenuModel>();
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                MenuModel menumodel = new MenuModel();
                menumodel.ModuleId = int.Parse(ds.Tables[0].Rows[i]["ModuleId"].ToString());
                menumodel.ModuleName = ds.Tables[0].Rows[i]["ModuleName"].ToString();
                menumodel.ParentID = int.Parse(ds.Tables[0].Rows[i]["ParentID"].ToString());
                menumodel.IsPage = bool.Parse(ds.Tables[0].Rows[i]["IsPage"].ToString());
                menumodel.UrlAddress = ds.Tables[0].Rows[i]["UrlAddress"].ToString();
                MenuModels.Add(menumodel);

            }

            string jsonstr = GetJsonStr(MenuModels);
            Response.Write(jsonstr);
            Response.End();
        }
    }
    public string GetJsonStr(List<MenuModel> MenuModels)
    {
        StringBuilder json = new StringBuilder();
        json.Append("{\"menuModels\":[");
        foreach (MenuModel model in MenuModels)
        {
            json.Append("{\"ModuleId\":\"" + model.ModuleId + "\",\"ModuleName\":\"" + model.ModuleName + 

          "\",\"ParentID\":\"" + model.ParentID + "\",\"IsPage\":\"" + model.IsPage + "\",\"UrlAddress\":\"" +  

           model.UrlAddress + "\"}");
           json.Append(","); 
        }
        return json.ToString().TrimEnd(',') + "]}";

    }
    public class MenuModel
    {
        public int ModuleId { get; set; }

        public string ModuleName { get; set; }

        public int ParentID { get; set; }

        public string UrlAddress { get; set; }

        public bool IsPage { get; set; }

    }