zoukankan      html  css  js  c++  java
  • 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; }

        }

  • 相关阅读:
    数据持久化
    搜索样式键盘的Return按钮是否可点击
    活动指示器
    在本机上安装zabbix,来监控服务器 二
    在本机上安装zabbix,来监控服务器 一
    关于cacti的相关问题
    xp_cmdshell 的开启和关闭
    写代码创建数据库,设置位置后比对用可视化界面创建数据库的区别
    随机0~N之间的整数
    关于MD5密码破解
  • 原文地址:https://www.cnblogs.com/scottpei/p/1609244.html
Copyright © 2011-2022 走看看