動態選單

參考文章：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: 
 
function (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);
        });
    };

注：

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");
    };