adminlte+layui框架搭建2 - 动态菜单

Posted 2021-01-31 newrohlzy

动态菜单

参考文章：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));

        });
    });

View Code

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