DDR爱好者之家 Design By 杰米
动态生成二级菜单树:
<script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data){ result = eval('('+ data +')'); } }); var alarmCount; alarmCount = result.total; /********** 静态代码形式 **********/ /* <li> <a href="#" rel="external nofollow" class="dropdown-toggle"> <i class="icon-desktop"></i> <span class="menu-text"> 设备管理 </span> <b class="arrow icon-angle-down"></b> </a> <ul class="submenu"> <li> <a href="smartTerminal.html" rel="external nofollow" > <i class="icon-double-angle-right"></i> 智能终端管理 </a> </li> <li> <a href="labelPrinter.html" rel="external nofollow" > <i class="icon-double-angle-right"></i> 标签打印机管理 </a> </li> </ul> </li> */ /*****从后台取出导航栏数据******/ $.ajax({ async:true, cache:false, url: "user_getMenuBuf.do", // dataType : "json", type: 'POST', success: function(result){ var result = eval('('+ result +')'); if(result != undefined && result.length > 0){ var firstMenu = []; var firstHref = []; var firstIcon = []; var subMenu = []; /******一级导航栏数据*******/ for (var i = 0; i < result.length; i++){ firstMenu[i] = result[i].name; firstHref[i] = result[i].url; firstIcon[i] = result[i].iconCls; /*******添加li标签********/ var menuInfo = document.getElementById("menuInfo"); var firstLi = document.createElement("li");//创建新的 li元素 menuInfo.appendChild(firstLi);//将此li元素添加至页面的ul下一级中 firstLi.style.borderBottom = "0px solid #CCEBF8";//设置li下边框样式 /******设置选中li、离开li时li的样式********/ firstLi.onmouseover = function(){ this.style.background = "#23ACFA"; }; /* firstLi.onmouseover = function(){ this.style.background = "#23ACFA"; }; */ firstLi.onmouseout=function(){ this.style.background = "#0477C0"; }; /******添加a标签**********/ var firstALabel = document.createElement("a"); firstALabel.setAttribute("href", firstHref[i]);//js为新添加的a元素动态设置href属性 firstALabel.setAttribute("class", "dropdown-toggle"); //firstALabel.className = "dropdown-toggle";//兼容性好 firstALabel.setAttribute("target", "content"); //firstALabel.style.backgroundImage="url(./img/17.jpg)" firstALabel.style.background = "#0477C0";//js为新添加的a元素动态设置背景颜色 // background:url(./img/17.jpg); firstALabel.style.marginLeft = "20px";//js为新添加的a元素动态设置左外边距 firstLi.appendChild(firstALabel); firstALabel.onmouseover = function(){ this.style.background = "#23ACFA"; }; /* firstALabel.onmouseover = function(){ this.style.background = "#23ACFA"; }; */ firstALabel.onmouseout=function(){ this.style.background = "#0477C0"; }; /*******添加i标签*******/ var firstILavel = document.createElement("i"); firstILavel.setAttribute("class", firstIcon[i]); firstILavel.style.color = "#F4F8FF";//动态设置i元素的颜色 firstALabel.appendChild(firstILavel); /*********添加span标签**********/ var firstSpan = document.createElement("span"); firstSpan.className = "menu-text"; firstSpan.innerHTML = firstMenu[i];//js为新添加的span元素动态设置显示内容 firstSpan.style.fontSize = "14.5px";//js为新添加的span元素动态设置显示内容的字体大小 firstSpan.style.color = "#66D2F1";//js为新添加的span元素动态设置显示内容的字体颜色 firstSpan.style.marginLeft = "15px"; firstALabel.appendChild(firstSpan); if (firstMenu[i] == "报警信息管理"){ var alarmIcon = document.createElement("span"); alarmIcon.className = "badge badge-important"; alarmIcon.innerHTML = alarmCount; //alarmCount为全局变量,且是通过ajax从后台获取到的 firstSpan.appendChild(alarmIcon); } if (result[i].children.length > 0){ var secondHref = []; var secondMenu = []; var secondIcon = []; /*******添加b标签********/ var firstBLabel = document.createElement("b"); firstBLabel.className = "arrow icon-angle-down"; firstBLabel.style.color = "white"; firstALabel.appendChild(firstBLabel); /********添加ul标签************/ var secondUl = document.createElement("ul"); secondUl.setAttribute("class", "submenu"); firstLi.appendChild(secondUl); for (var j = 0; j < result[i].children.length; j++){ secondHref[j] = result[i].children[j].url; secondMenu[j] = result[i].children[j].name; secondIcon[j] = result[i].children[j].iconCls; /******添加li标签*******/ var secondLi = document.createElement("li"); secondLi.style.background = "#CCEBF8"; secondUl.appendChild(secondLi); /*******添加a标签*******/ var secondALabel = document.createElement("a"); secondALabel.setAttribute("href", secondHref[j]); secondALabel.setAttribute("target", "content"); //secondALabel.style.background = "#CCEBF8"; secondLi.appendChild(secondALabel); /*******添加i标签**********/ var secondILabel = document.createElement("i"); secondILabel.setAttribute("class", "icon-double-angle-right"); secondALabel.appendChild(secondILabel); /******添加二级导航信息********/ secondALabel.innerHTML = secondMenu[j]; secondALabel.style.fontSize = "15px"; //secondALabel.style.marginLeft = "60px"; } } } } }, error: function() { alert("加载菜单失败"); } }); }) </script>
静态生成菜单树的代码:
生成菜单树的效果:
以上这篇利用js将ajax获取到的后台数据动态加载至网页中的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年11月26日
2024年11月26日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]