正文

easyui加载json菜单的相关代码

IP云
IP云V管理员/3 阅读
10/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

/**
* 取菜单数据
*/
$(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);
}