easyui加载json菜单的相关代码

/**
* 取菜单数据
*/
$(function getmenujson() {
    $.ajax({       
        type: "GET",
        cache: false,
        url: "/ClientsData/GetMenuJson",
        datatype: "json",
        success: function (db) {
            getmenuhtml(JSON.parse(db));
            sidebar();    
        }
    })    
});
/**
* 显示json模板侧边栏菜单
*/
function getmenuhtml (jsondata){   
    var div = "";
    $.each(jsondata, function (i, sm) {
        var htmlli = "";
        htmlli += '<ul id="pr-side-tree" class="easyui-tree pr-side-tree">';
        $.each(sm.menus, function (o, j) {
            htmlli += '<li iconCls="' + j.icon + '"><a href="javascript:void(0)" data-icon="' + j.icon + '" data-link="' + j.url + '" iframe="0">' + j.title + '</a></li>';
        });
        htmlli += '</ul>';
        div = '<div id='+sm.id +' title=' + sm.title + ' data-options="iconCls:\'' + sm.icon + '\'" style="padding:5px;" >' + htmlli + '</div>';

        $('#pr-accordion').accordion('add', { title: sm.title, iconCls: sm.icon, content: div })
    }
    );
    $('#pr-accordion').accordion({
        autoHeight: false,
        navigator: true
    });    
}
/**
* 侧边栏菜单点击事件
*/
function sidebar() {
    $('#pr-side-tree a').bind("click", function () {
        var id = $(this).id();
        var title = $(this).text();
        var url = $(this).attr('data-link');
        var iconCls = $(this).attr('data-icon');
        var iframe = $(this).attr('iframe') == 1 ? true : false;
        addTab(id,title, url, iconCls, iframe);
    });
};
/**
* Name 载入树形菜单
*/
$('#pr-side-tree').tree({
    url: 'temp/menu.php',
    cache: false,
    onClick: function (node) {
        var url = node.attributes['url'];
        if (url == null || url == "") {
            return false;
        }
        else {
            addTab(node.id,node.text, url, '', node.attributes['iframe']);
        }
    }
});
/**
* Name 选项卡初始化
*/
$('#pr-tabs').tabs({
    tools: [{
        iconCls: 'icon-reload',
        border: false,
        handler: function () {
            $('#pr-datagrid').datagrid('reload');
        }
    }]
});
/**
* Name 添加菜单选项
* Param title 名称
* Param href 链接
* Param iconCls 图标样式
* Param iframe 链接跳转方式（true为iframe，false为href）
*/
function addTab(id, title, href, iconCls, iframe) {
    if (Id != "") {
        top.$.cookie('Pray_currentmoduleid', Id, { path: "/" });
    }
    var tabPanel = $('#pr-tabs');
    if (!tabPanel.tabs('exists', title)) {
        var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
        if (iframe) {
            tabPanel.tabs('add', {
                title: title,
                content: content,
                iconCls: iconCls,
                fit: true,
                cls: 'pd3',
                closable: true
            });
        }
        else {
            tabPanel.tabs('add', {
                title: title,
                href: href,
                iconCls: iconCls,
                fit: true,
                cls: 'pd3',
                closable: true
            });
        }
    }
    else {
        tabPanel.tabs('select', title);
        //触发点击事件
        $("#tab_menu-tabrefresh").trigger("click");
    }
    //隐藏侧边栏
   // $(".layout-button-left").trigger("click");
}
/**
* Name 移除菜单选项
*/
function removeTab() {
    var tabPanel = $('#pr-tabs');
    var tab = tabPanel.tabs('getSelected');
    if (tab) {
        var index = tabPanel.tabs('getTabIndex', tab);
        tabPanel.tabs('close', index);
    }
}
/**
* 绑定选项卡右键事件
*/
$(document).ready(function () {
    //监听右键事件，创建右键菜单
    $('#pr-tabs').tabs({
        onContextMenu: function (e, title, index) {            
            //屏闭右键
            e.preventDefault();
            //右键选中
            $('#pr-tabs').tabs('select', title);
            if (index > 0) {
                //记录title,然后显示右键
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                }).data("tabTitle", title);
            }
        }
    })
});
/**
* 右键菜单点击事件
*/
 $("#mm").menu({
     onClick: function (item) {        
                    closeTab(this, item.name);
                }
            });
//删除Tabs
 function closeTab(menu, type) {
     var tabPanel = $('#pr-tabs');
     var allTabs = tabPanel.tabs('tabs');
    var allTabtitle = [];
    $.each(allTabs, function (i, n) {
        var opt = $(n).panel('options');
        if (opt.closable)
            allTabtitle.push(opt.title);
    });    
    var curTabTitle = $(menu).data("tabTitle"); 
    var curTabIndex = tabPanel.tabs("getTabIndex", tabPanel.tabs('getSelected'));
    switch (type) {
        case 1://关闭当前
            tabPanel.tabs("close", curTabIndex);
            return false;
            break;
        case 2://全部关闭
            $.messager.confirm('警告','确定关闭所有窗口?',function(r){
                if (r){
                    for (var i = 0; i < allTabtitle.length; i++) {
                        tabPanel.tabs('close', allTabtitle[i]);
                    }                    
                }
            });
            break;
        case 3://除此之外全部关闭
            for (var i = 0; i < allTabtitle.length; i++) {
                if (curTabTitle != allTabtitle[i])
                    tabPanel.tabs('close', allTabtitle[i]);
            }
            tabPanel.tabs('select', curTabTitle);
            break;
        case 4://当前侧面右边
            if (curTabIndex == allTabtitle.length) {
                $.messager.show({title:'提示',msg:'右边没有了!'});
                break;
            }
            for (var i = curTabIndex; i < allTabtitle.length; i++) {
                tabPanel.tabs('close', allTabtitle[i]);
            }
            tabPanel.tabs('select', curTabTitle);
            break;
        case 5: //当前侧面左边
            if (curTabIndex == 1)
            {
                $.messager.show({title:'提示',msg:'左边没有了!'});
                break;
            }
            for (var i = 0; i < curTabIndex - 1; i++) {
                tabPanel.tabs('close', allTabtitle[i]);
            }
            tabPanel.tabs('select', curTabTitle);
            break;
        case 6: //刷新
            var panel = tabPanel.tabs("getTab", curTabTitle).panel("refresh");
            break;
    }

}

网页

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
    <title>EasyUI Web Admin Power by LiGanWei</title>
    <link rel="stylesheet" type="text/css" href="~/Content/easyui/1.3.4/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/framework-home.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/framework-icon.css" />
    <script type="text/javascript" src="~/Content/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="~/Content/easyui/1.3.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
    
</head>
<body class="easyui-layout">
    <!-- 页头 -->
    <div class="pr-header" data-options="region:'north',border:false,split:true">
        <div class="pr-header-left">
            <h1>EasyUI Web Admin</h1>
        </div>
        <div class="pr-header-right">
            <p><strong class="easyui-tooltip" title="2条未读消息">admin</strong>，欢迎您！</p>
            <p><a href="#">网站首页</a>|<a href="#">支持论坛</a>|<a href="#">帮助中心</a>|<a href="#">安全退出</a></p>
        </div>
    </div>
    <!-- end页头 -->
    <!-- 侧边栏 -->

    <div class="pr-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
        <div id="pr-accordion" class="easyui-accordion" data-options="border:false,fit:true">
        </div>
    </div>
    <!-- end侧边栏 -->
    <!-- begin 主体 -->
    <div class="pr-main" data-options="region:'center'">
        <div id="pr-tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="首页" data-options="href:'/Home/Default',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
        </div>
    </div>
    <!-- end 主体 -->
    <!-- begin 结尾 -->
    <div class="pr-footer" data-options="region:'south',border:true,split:true">
        &copy; 2018 Li All Rights Reserved
    </div>
    <!-- end 结尾 -->
<div id="mm" class="easyui-menu" style="width:120px;">
    <div id="mm-tabclose" data-options="name:6">刷新</div>
         <div id="mm-tabclose" data-options="name:1">关闭</div>
        <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
        <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
        <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div>

    </div>
    <!--菜单-->
    <script type="text/javascript" src="~/Content/js/home.js"></script>
</body>
</html>

控制台

        public string GetMenuJson ()
        {
            var list = new MenuApp().GetList();
            var MenuList = new List<MenuModel>();
            foreach (var item in list)
            {
                MenuModel tmep = new MenuModel();
                tmep.id = item.F_Id;
                tmep.icon = item.F_Icon;
                tmep.parentId = item.F_ParentId;
                tmep.text = item.F_Text;
                tmep.link = item.F_Iink;
                tmep.iframe = item.F_Iframe;
                MenuList.Add(tmep);
            }
           return Menu.GetMenuJosn(MenuList);
        }

转载于:https://www.cnblogs.com/praybb/p/9453240.html