layui 树形菜单绑定数据 改版

Posted 2020-12-21 babyrui

树形菜单

$(function () {
            $.ajax({
                url: window.location.protocol + ‘//‘ + window.location.host + ‘/Home/Menu‘,
                data: null,
                type: ‘post‘,
                dataType: ‘json‘,
                async: true,
                success: function (res) {
                    var obj = eval(res);
                    console.log(res);
                    if (obj != null) {
                        var data = obj;
                        var comIocn = ‘‘;
                        //触发事件
                        var tab = {
                            tabAdd: function (title, url, id) {
                                //新增一个Tab项
                                element.tabAdd(‘xbs_tab‘, {
                                    title: title
                                    , content: ‘<iframe tab-id="‘ + id + ‘" frameborder="0" src="‘ + url + ‘" scrolling="yes" class="x-iframe"></iframe>‘
                                    , id: id
                                })
                            }
                            , tabDelete: function (othis) {
                                //删除指定Tab项
                                element.tabDelete(‘xbs_tab‘, ‘44‘); //删除：“管理”

                                othis.addClass(‘layui-btn-disabled‘);
                            }
                            , tabChange: function (id) {
                                //切换到指定Tab项
                                element.tabChange(‘xbs_tab‘, id); //切换到：管理
                            }
                        };
                        var html = ‘<ul id="nav">‘;
                        var randerTree = function (d) {
                            for (var i = 0; i < d.length; i++) {
                                if (d[i].ParentId == null) {
                                    html += ‘<li><a href="javascript:;"><i class="iconfont">‘ + d[i].icon + ‘</i><cite>‘ + d[i].menuName + ‘</cite><i class="iconfont nav_right">‘ + d[i].iconRight + ‘</i></a><ul class="sub-menu">‘

                                    if (d[i].childs.length == 0) {
                                        html += ‘</ul>‘
                                    }
                                }
                                if (d[i].childs.length > 0) {
                                    randerTree(d[i].childs)
                                }
                                else {
                                    
                                    html += ‘<li><a _href="‘ + d[i].menuUrl + ‘"><i class="iconfont">‘ + d[i].icon + ‘</i><cite>‘ + d[i].menuName + ‘</cite></a></li>‘
                                    if (i == d.length - 1) {
                                        html += ‘</ul></li>‘
                                    }
                                   
                                }
                            }
                            return html;
                        }
                        var innerhtml = randerTree(data) + ‘</ul>‘;

                        $(‘#side-nav‘).append(innerhtml);

                        $(‘#nav li‘).click(function (event) {

                            if ($(this).children(‘.sub-menu‘).length) {
                                if ($(this).hasClass(‘open‘)) {
                                    $(this).removeClass(‘open‘);
                                    $(this).find(‘.nav_right‘).html(‘‘);
                                    $(this).children(‘.sub-menu‘).stop().slideUp();
                                    $(this).siblings().children(‘.sub-menu‘).slideUp();

                                } else {
                                    $(this).addClass(‘open‘);
                                    $(this).children(‘a‘).find(‘.nav_right‘).html(‘‘);
                                    $(this).children(‘.sub-menu‘).stop().slideDown();
                                    $(this).siblings().children(‘.sub-menu‘).stop().slideUp();
                                    $(this).siblings().find(‘.nav_right‘).html(‘‘);
                                    $(this).siblings().removeClass(‘open‘);
                                }
                            } else {

                                var url = $(this).children(‘a‘).attr(‘_href‘);
                                var title = $(this).find(‘cite‘).html();
                                var index = $(‘.left-nav #nav li‘).index($(this));

                                for (var i = 0; i < $(‘.x-iframe‘).length; i++) {
                                    if ($(‘.x-iframe‘).eq(i).attr(‘tab-id‘) == index + 1) {
                                        tab.tabChange(index + 1);
                                        event.stopPropagation();
                                        return;
                                    }
                                };
                                tab.tabAdd(title, url, index + 1);
                                tab.tabChange(index + 1);
                            }
                            event.stopPropagation();
                        })
                    }
                    else {
                        var html = ‘<ul id="nav" class="x-red">您无授权,请联系管理员！</ul>‘;
                        $(‘#side-nav‘).append(html);
                    }
                }
            });
        });