adminlte+layui框架搭建2 - 動態選單
阿新 • • 發佈:2019-01-02
動態選單
參考文章:https://cloud.tencent.com/developer/article/1342558
主要修改兩個地方:
1.系統初始化載入一級選單,在adminlte.js檔案
$(window).on('load', function () { $.ajax({ url: "/Home/GetTree?id=0", type: "Post", timeout: 5000, async: true, dataType: "json", success:View Codefunction (data) { if (data != null && data != undefined) { var leftTreeBox = $("#ModuleNav").empty(); leftTreeBox.append("<li class=\"header\">MAIN NAVIGATION</li>"); var treeHtml = "";for (var i = 0; i < data.length; i++) { //if (i == 0) { // treeHtml += "<li class=\"active treeview\" name=" + data[i].parentId + " id="+data[i].id+"><a href=#" + data[i].id + "><i class=\"fa fa-heartbeat\"></i><span>" + data[i].text + "</span><span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a></li>";//} //else { treeHtml += "<li class=\"treeview\" name=" + data[i].parentId + " id=" + data[i].id +"><a href=#" + data[i].id + "><i class=\"fa fa-heartbeat\"></i><span>" + data[i].text + "</span><span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a></li>"; //} } leftTreeBox.append(treeHtml); } else { console.log("選單載入失敗"); } }, error: function (error) { console.log("選單載入失敗:" + error); } }) $(Selector.data).each(function () { //原文 Plugin.call($(this)); }); });
2.載入二級選單,在adminlte.js檔案
// 判斷該選單是否是二級選單如果是則新增選項卡 (2018-12-25 lzy add) Tree.prototype._setUpListeners = function () { var that = this;//獲取樹節點 $(this.element).on('click', this.options.trigger, function (event) { var ele = $(this); var id = ele.attr("href").substring(1, $(this).attr("href").length);//如果是一級選單那麼獲取ID否則獲取到節點的連結串為跳轉頁 //獲取二級選單 if (ele.parent().attr("name") == 0) { //賦予當前項選中樣式,且選單展開 ele.parent().addClass("active").siblings().removeClass("active"); that.toggle($(this), event); $.ajax({ url: "/Home/GetTree?id=" + encodeURI(id), type: "Post", timeout: 5000, async: true, dataType: "json", success: function (data) { if (data != null && data != undefined) { ele.parent().children(".treeview-menu").remove(); ele.parent().append("<ul class=\"treeview-menu menu-open\">"); var treeHtml = ""; for (var i = 0; i < data.length; i++) { treeHtml += "<li name=\"1\" id=" + data[i].id +"><a href=#" + data[i].value + "><i class=\"fa fa-circle-o\"></i>" + data[i].text + "</a></li>" } ele.parent().find(".treeview-menu").append(treeHtml); ele.parent().find(".treeview-menu").append("</ul>"); } else { console.log("選單載入失敗"); } return; }, error: function (error) { console.log("選單載入失敗:" + error); } }) }//新增選項卡調轉 else if ($(this).parent().attr("name") == 1) { var tabId = ele.parent().attr("id"); var tabUrl = id; var tabName = ele.text(); //isCheckAddTab(tabId, tabUrl, tabName); addTabs({ "id": tabId, "title": tabName, "content": "", "url": tabUrl }); } //原來執行的函式 //that.toggle($(this), event); }); };View Code
注:
bootstrap tab封裝
var addTabs = function (obj) { var id = "tab_" + obj.id; var content = ""; $("#tabMain .active").removeClass("active"); $(".tab-content .active").removeClass("active"); //如果TAB不存在,建立一個新的TAB if (!$("#" + id)[0]) { //固定TAB中IFRAME高度 var mainHeight = $(document.body).height() - 95; //建立新TAB的title var title = '<li id="tab_' + id + '"><a href="#' + id + '" data-toggle="tab">' + obj.title; //是否允許關閉 if (obj.close) { title += ' <i class="icon-cancel3"tabclose="' + id + '"></i>'; } title += '</a></li>'; //是否指定TAB內容 if (obj.content) { content = '<div role="tabpanel"class="tab-pane"id="' + id + '">' + obj.content + '</div>'; } else {//沒有內容,使用IFRAME開啟連結 content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe frameborder="0" src="' + obj.url + '" scrolling="auto" style="width:100%;height:' + mainHeight + 'px;"></iframe></div>' } //加入TABS $("#tabMain").append(title); $("#tabContent").append(content); } //啟用TAB $("#tab_" + id).addClass('active'); $("#" + id).addClass("active"); };View Code