利用js將ajax獲取到的後臺資料動態載入至網頁中
動態生成二級選單樹：
<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="#" 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">
<i class="icon-double-angle-right"></i>
智慧終端管理
</a>
</li>
<li>
<a href="labelPrinter.html">
<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>
靜態生成選單樹的程式碼：
生成選單樹的效果：
