Web应用程序系统的多用户权限控制设计及实现-首页模块【5】
首页模块就是展示不同权限的最终结果了，在阅读这章之前若有些不明白，可看看后续的单独的权限模块，用户模块，目录模块后从整体上再看首页模块。
阅读该模块需要一定或者是比较熟练的js知识,EasyUI Tab控件知识。整个首页模块的流程是登陆模块获取到了用户的基本信息，可以访问的网页信息，目录信息后，封装在sessionManage会话中，通过JS文件做数据的格式转换及动作定义，通过Css文件做网页的效果美化。简而言之，就是获取后台数据渲染到网页。
1.1视图
首页模块的一级导航选择不同的信息关联二级导航，二级导航展开显示可以访问的页面链接。每一个链接在网页的展示模块通过EasyUI的Tab控件展示，可以实现如下效果:
对应单个的tab中显示的网页信息是通过iframe标签的方式实现的。及打开一个tab就创建一个iframe对象。关闭一个tab就释放该iframe对象。
首页模块的基本结构简图如下：
首页视图是由两部分视图组成的。主视图主要是展示整个的框架结构，还有一个部分视图主要是展示左侧的权限信息页面。主视图中比较关键的代码如下：
@using Models
@using Page = Models.Page
<!--先把页面model加载到视图-->
<!--解析Model生成一级导航目录信息-->
<ul class="menuchild">
@if (ViewBag.Navigation != null)
{
IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation;
foreach (Catalog item in navigationList)
{
<li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li>
}
}
</ul>
<!--左边菜单容器 加载部分视图展示左边的菜单信息 -->
<div class="scroll-panel" id="scrollpanel">
<div style="top: -10.8px;" class="scroll-content" id="scrollcontent">
<div id="rightListDiv">
@Html.Partial("_rightMessage", new { navigationId = -1 })
</div>
</div>
</div>
首页详细视图代码如下：
1 @using Models 2 @using Page = Models.Page 3 @{ 4 Layout = null; 5 } 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>####</title> 11 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/gray/easyui.css"> 12 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/icon.css"> 13 14 <link href="~/Content/CSS/style.css" rel="stylesheet" /> 15 <style> 16 .panel-tool { 17 visibility: hidden; 18 } 19 20 #preferenceUl { 21 display: list-item; 22 margin: 5px; 23 margin-top: 2px; 24 padding: 10px; 25 } 26 27 #preferenceUl li { 28 display: list-item; 29 list-style-type: square; 30 margin: 5px; 31 } 32 </style> 33 34 </head> 35 36 <body style="overflow: hidden;"> 37 38 <div class="header"> 39 <!--header页面上面部分 --> 40 <div class=" system_name"></div> 41 <!--用户 --> 42 <div class="top_user" onmouseover="theimg.src='@Url.Content("~/Content/image/title_images/user_white.png")'" onmouseout="theimg.src='@Url.Content("~/Content/image/title_images/user_blue.png")'"> 43 <dl class="topmenu"> 44 <dd> 45 <div class="toptitle" style="height: 50px;"> 46 <span style="width: 32px; height: 32px;"> 47 <img id="theimg" src="~/Content/image/title_images/user_blue.png" /> 48 </span> 49 <span class="spant">@Html.Raw(ViewData["UserName"]) </span> 50 </div> 51 <ul class="menuchild"> 52 <li><a href="javascript:Exit();">退出系统</a><i></i></li> 53 54 </ul> 55 </dd> 56 </dl> 57 </div> 58 59 60 61 <!--导航 --> 62 <div class="top_navigation" onmouseover="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'" onmouseout="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'"> 63 <dl class="topmenu"> 64 <dd> 65 <div class="toptitle" style="height: 50px;"> 66 <span style="width: 32px; height: 32px;"> 67 <img id="nav_theimg" src="~/Content/image/title_images/navigation.png" /> 68 </span> 69 <span class="spant">导航</span> 70 </div> 71 <ul class="menuchild"> 72 @if (ViewBag.Navigation != null) 73 { 74 IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation; 75 foreach (Catalog item in navigationList) 76 { 77 <li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li> 78 } 79 } 80 </ul> 81 </dd> 82 </dl> 83 </div> 84 85 86 87 <!--首页 --> 88 <div class="top_index" onmouseover="index_img.src='../Content/image/title_images/index_white.png'" onmouseout="index_img.src='../Content/image/title_images/index_blue.png'"> 89 <dl class="topmenu"> 90 <dd> 91 <div class="toptitle" style="height: 50px;"> 92 <a href="#" onclick="addTab('首页','');" style="color: #ffffff"><span style="width: 32px; height: 32px;"> 93 <img id="index_img" src="~/Content/image/title_images/index_blue.png" /> 94 </span> 95 <span class="spant">首页 </span></a> 96 </div> 97 </dd> 98 </dl> 99 </div> 100 101 </div> 102 <!--header结束 --> 103 104 <div class="logo" id="nowTime"> 105 <!--系统logodiv --> 106 </div> 107 108 <div class="main_hoder"> 109 <!--下面整个容器 --> 110 <div class="left_hoder"> 111 <!--左边容器 --> 112 <div class="left_hoder_menu"> 113 <!--左边菜单容器 --> 114 <div class="scroll-panel" id="scrollpanel"> 115 <div style="top: -10.8px;" class="scroll-content" id="scrollcontent"> 116 <div id="rightListDiv"> 117 @Html.Partial("_rightMessage", new { navigationId = -1 }) 118 </div> 119 </div> 120 </div> 121 <div class="scroll-bar" id="scrollbar"> 122 <div class="scroll-block" id="scrollblock"></div> 123 </div> 124 </div> 125 </div> 126 127 <div class="center_hoder"> 128 <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="pageTab"> 129 130 131 <div title="首页" style="padding: 10px;"> 132 133 134 <div class="easyui-layout" data-options="fit:true"> 135 136 欢迎加载首页信息。 137 138 139 </div> 140 141 142 143 </div> 144 </div> 145 </div> 146 <!--其他网页显示的容器--> 147 <div class="footer"> 148 技术支持：###### 149 </div> 150 151 </div> 152 <!--下面整个容器 --> 153 </body> 154 155 <script src="~/Scripts/jquery.js"></script> 156 <!--滚动条效果 --> 157 <script src="~/Scripts/mousewheel.js"></script> 158 <script src="~/Scripts/scroll.js"></script> 159 <script type="text/javascript" src="~/Content/easyui143/jquery.easyui.min.js"></script> 160 <script type="text/javascript" src="~/Content/easyui143/locale/easyui-lang-zh_CN.js"></script> 161 162 <script type="text/javascript" src="~/Scripts/CustomJs/default.js"></script> 163 164 </html>
部分视图代码完整代码如下：
1 @using Models 2 @using Page = Models.Page 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <title></title> 7 <meta name="viewport" content="width=device-width" /> 8 9 <link href="~/Content/CSS/style.css" rel="stylesheet" /> 10 </head> 11 <body> 12 <dl class="leftmenu"> 13 <!--左边一级菜单样式 --> 14 @if (ViewBag.RightList != null) 15 { 16 IList<Catalog> rightList = (List<Catalog>)ViewBag.RightList; 17 foreach (Catalog right in rightList) 18 { 19 IList<Page> pageList = right.PageList; 20 if (pageList.Count > 0) 21 { 22 <dd> 23 <div class='title'> 24 <span class='img_style'> 25 <img id='j_img' src='@right.PictureUrl' /></span>@right.CatalogName 26 </div> 27 <ul class='menuson'> 28 @foreach (Page page in pageList) 29 { 30 <li><cite></cite> 31 <a href='#' onclick="addTab('@page.PageName','@("../" + page.PageUrl)');">@page.PageName</a><i></i></li> 32 } 33 </ul> 34 </dd> 35 } 36 } 37 } 38 </dl> 39 40 <script type="text/javascript" src="~/Scripts/CustomJs/_rightMessage.js"></script> 41 </body> 42 </html>
1.2JS文件
首页加载共用了两个JS文件，其中视图IndexHome.cshtml对应default.js,_rightMessage.cshtml对应_rightMessage.js文件。
两个文件中关键的代码均是创建iframe对象和销毁iframe对象，部分代码如下：
/** 把iframe与Tab的属性结合起来。
* 增加iframe模式的标签页
* param {[type]} jq [description]
* param {[type]} params [description]
*/
addIframeTab: function (jq, params) {
return jq.each(function () {
if (params.tab.href) {
delete params.tab.href;
}
$(this).tabs('add', params.tab);
$(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });
});
},
/**
* 更新tab的iframe内容
* param {jq Object} jq [description]
* param {Object} params [description]
* return {jq Object} [description]
*/
updateIframeTab: function (jq, params) {
return jq.each(function () {
params.iframe = params.iframe || {};
if (!params.iframe.src) {
var $tab = $(this).tabs('getTab', params.which);
if ($tab == null) return;
var $tabBody = $tab.panel('body');
var $iframe = $tabBody.find('iframe');
if ($iframe.length === 0) return;
$.extend(params.iframe, { 'src': $iframe.attr('src') });
}
$(this).tabs('loadTabIframe', params);
});
}
//创建Frame
function createFrame(url) {
var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>';
return s;
};
//添加tab页
function addTab(title, tabHref) {
if ($("#pageTab").tabs("exists", title)) {
$("#pageTab").tabs("select", title);
} else {
$('#pageTab').tabs('addIframeTab', {
tab: { title: title, closable: true },
iframe: { src: tabHref }
});
}
default.js文件的完整代码如下：
1 $(function () { 2 //设置左侧导航栏的默认高度 3 $(".scroll-panel").height($(window).height() - 110); 4 5 //左侧导航菜单监听事件，修改图标样式 6 $('.title').click(function () { 7 var $ul = $(this).next('ul'); 8 var src, srcArray; 9 10 src = $(".title_current img").attr("src"); 11 if (src != null) { 12 srcArray = src.indexOf('_blue'); 13 14 src = src.substring(0, srcArray) + '.png'; 15 16 $(".title_current img").attr("src", src); 17 } 18 $(".title_current").removeClass("title_current"); //移除所有的title_current样式类 19 20 $(".leftmenu").find('ul').slideUp(); 21 22 if ($ul.is(':visible')) { 23 //收起导航菜单 24 $(this).next('ul').slideUp(); 25 } else { 26 //展开导航菜单并修改目录菜单的样式以及图标 27 $(this).next('ul').slideDown(); 28 $(this).addClass("title_current"); 29 30 src = $(".title_current img").attr("src"); //目录图标 31 srcArray = src.split('.'); 32 src = srcArray[0] + '_blue.png'; 33 $(".title_current img").attr("src", src); 34 } 35 }); 36 37 38 //页面导航监听事件 39 $('.menuson a').click(function () { 40 $('.menuson a').removeClass("aclick"); 41 $(this).addClass("aclick"); 42 }); 43 44 45 //当前用户获取焦点 46 $('.top_user').hover(function () { 47 var path = $('.top_user .topmenu .toptitle'); 48 var $ul = path.next('ul'); 49 if ($ul.is(':visible')) { 50 path.next('ul').slideUp(); 51 } else { 52 path.next('ul').slideDown(); 53 } 54 }); 55 56 57 //导航获取焦点 58 $('.top_navigation').hover(function () { 59 var path = $('.top_navigation .topmenu .toptitle'); 60 var $ul = path.next('ul'); 61 if ($ul.is(':visible')) { 62 path.next('ul').slideUp(); 63 } else { 64 path.next('ul').slideDown(); 65 } 66 }); 67 68 69 $.extend($.fn.tabs.methods, { 70 /** 71 * 加载iframe内容 72 * param {jq Object} jq [description] 73 * param {Object} params params.which:tab的标题或者index;params.iframe:iframe的相关参数 74 * return {jq Object} [description] 75 */ 76 loadTabIframe: function (jq, params) { 77 return jq.each(function () { 78 var $tab = $(this).tabs('getTab', params.which); 79 if ($tab == null) return; 80 81 var $tabBody = $tab.panel('body'); 82 83 //销毁已有的iframe 84 var $frame = $('iframe', $tabBody); 85 if ($frame.length > 0) { 86 try {//跨域会拒绝访问，这里处理掉该异常 87 $frame[0].contentWindow.document.write(''); 88 $frame[0].contentWindow.close(); 89 } catch (e) { 90 //Do nothing 91 } 92 $frame.remove(); 93 if ($.browser.msie) { 94 CollectGarbage(); 95 } 96 } 97 $tabBody.html(''); 98 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' }); 99 var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody); 100 var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加载，请稍候 ...') + '</div>').appendTo($tabBody); 101 var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody); 102 var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody); 103 104 var iframe = document.createElement("iframe"); 105 iframe.src = params.iframe.src; 106 iframe.frameBorder = params.iframe.frameBorder || 0; 107 iframe.height = params.iframe.height || '100%'; 108 iframe.width = params.iframe.width || '100%'; 109 if (iframe.attachEvent) { 110 iframe.attachEvent("onload", function () { 111 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 112 $(this).remove(); 113 if ($(this).hasClass('mask-message')) { 114 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 115 $(this).remove(); 116 }); 117 } 118 }); 119 }); 120 } else { 121 iframe.onload = function () { 122 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 123 $(this).remove(); 124 if ($(this).hasClass('mask-message')) { 125 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 126 $(this).remove(); 127 }); 128 } 129 }); 130 }; 131 } 132 $containter[0].appendChild(iframe); 133 }); 134 }, 135 136 /** 137 * 增加iframe模式的标签页 138 * param {[type]} jq [description] 139 * param {[type]} params [description] 140 */ 141 addIframeTab: function (jq, params) { 142 return jq.each(function () { 143 if (params.tab.href) { 144 delete params.tab.href; 145 } 146 $(this).tabs('add', params.tab); 147 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe }); 148 }); 149 }, 150 151 /** 152 * 更新tab的iframe内容 153 * param {jq Object} jq [description] 154 * param {Object} params [description] 155 * return {jq Object} [description] 156 */ 157 updateIframeTab: function (jq, params) { 158 return jq.each(function () { 159 params.iframe = params.iframe || {}; 160 if (!params.iframe.src) { 161 var $tab = $(this).tabs('getTab', params.which); 162 if ($tab == null) return; 163 var $tabBody = $tab.panel('body'); 164 var $iframe = $tabBody.find('iframe'); 165 if ($iframe.length === 0) return; 166 $.extend(params.iframe, { 'src': $iframe.attr('src') }); 167 } 168 $(this).tabs('loadTabIframe', params); 169 }); 170 } 171 }); 172 173 174 175 176 }); 177 178 //退出登陆 179 function Exit() { 180 if (window.confirm("确定要退出吗？")) { 181 window.location.href = "../Login/Login"; 182 } 183 }; 184 185 186 //获取当前时间并格式化 187 function current() { 188 var d = new Date(), str = ''; 189 190 if (parseInt(d.getHours()) < 10) { 191 str += "0" + d.getHours() + ':'; 192 } 193 else { 194 str += d.getHours() + ':'; 195 } 196 if (parseInt(d.getMinutes()) < 10) { 197 str += "0" + d.getMinutes() + ':'; 198 } 199 else { 200 str += d.getMinutes() + ':'; 201 } 202 203 if (parseInt(d.getSeconds()) < 10) { 204 str += "0" + d.getSeconds(); 205 } 206 else { 207 str += d.getSeconds(); 208 } 209 210 str += "</div><div style='position: relative; top: 40px; left: 120px; width: 100px; font-family: 微软雅黑; font-size: 12px;'>" 211 + d.getFullYear() + '年'; //获取当前年份 212 if (parseInt(d.getMonth()) < 9) { 213 var m = d.getMonth() + 1 + '月'; 214 str += "0" + m; 215 } 216 else { 217 str += d.getMonth() + 1 + '月'; //获取当前月份（0——11） 218 } 219 if (parseInt(d.getDate()) < 10) { 220 str += "0" + d.getDate() + '日 '; 221 } 222 else { 223 str += d.getDate() + '日 '; 224 } 225 str += "</div>"; 226 227 228 var today = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); 229 230 var w = "<div style='position: relative; top: 30px; left: 120px; width: 100px; font-family: 微软雅黑; font-size: 12px; font-weight: bold;'>" 231 + today[d.getDay()] + ' '; 232 return w + str; 233 } 234 235 //设置显示时间 236 setInterval(function () { $("#nowTime").html(current); }, 1000); 237 238 239 //“导航”下拉选项的点击事件 240 function navigationClick(navigationId) { 241 $("#rightListDiv").load('/IndexHome/RightMessage?navigationId=' + navigationId); 242 }; 243 244 //创建Frame 245 function createFrame(url) { 246 var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>'; 247 return s; 248 }; 249 250 251 //添加tab页 252 function addTab(title, tabHref) { 253 if ($("#pageTab").tabs("exists", title)) { 254 $("#pageTab").tabs("select", title); 255 } else { 256 $('#pageTab').tabs('addIframeTab', { 257 tab: { title: title, closable: true }, 258 iframe: { src: tabHref } 259 }); 260 } 261 }; 262 263 //点击树节点，打开新的tab页 264 function AddNewTab(node) { 265 if (node.attributes != null) { 266 if ($("#pageTab").tabs("exists", node.attributes.pageName)) { 267 $("#pageTab").tabs("select", node.attributes.pageName); 268 } else { 269 $('#pageTab').tabs('addIframeTab', { 270 tab: { title: node.attributes.pageName, closable: true }, 271 iframe: { src: "/" + node.attributes.url } 272 }); 273 } 274 } 275 276 };
_rightMessage.js文件的完整代码如下：
1 $(function () { 2 //左侧导航菜单监听事件，修改图标样式 3 $('.title').click(function () { 4 var $ul = $(this).next('ul'); 5 var src, srcArray; 6 7 src = $(".title_current img").attr("src"); 8 if (src != null) { 9 srcArray = src.indexOf('_blue'); 10 11 src = src.substring(0, srcArray) + '.png'; 12 13 $(".title_current img").attr("src", src); 14 } 15 $(".title_current").removeClass("title_current"); //移除所有的title_current样式类 16 17 $(".leftmenu").find('ul').slideUp(); 18 19 if ($ul.is(':visible')) { 20 //收起导航菜单 21 $(this).next('ul').slideUp(); 22 } else { 23 //展开导航菜单并修改目录菜单的样式以及图标 24 $(this).next('ul').slideDown(); 25 $(this).addClass("title_current"); 26 27 src = $(".title_current img").attr("src"); //目录图标 28 srcArray = src.split('.'); 29 src = srcArray[0] + '_blue.png'; 30 $(".title_current img").attr("src", src); 31 } 32 }); 33 34 35 //页面导航监听事件 36 $('.menuson a').click(function () { 37 $('.menuson a').removeClass("aclick"); 38 $(this).addClass("aclick"); 39 }); 40 41 42 43 44 $.extend($.fn.tabs.methods, { 45 /** 46 * 加载iframe内容 47 * param {jq Object} jq [description] 48 * param {Object} params params.which:tab的标题或者index;params.iframe:iframe的相关参数 49 * return {jq Object} [description] 50 */ 51 loadTabIframe: function (jq, params) { 52 return jq.each(function () { 53 var $tab = $(this).tabs('getTab', params.which); 54 if ($tab == null) return; 55 56 var $tabBody = $tab.panel('body'); 57 58 //销毁已有的iframe 59 var $frame = $('iframe', $tabBody); 60 if ($frame.length > 0) { 61 try {//跨域会拒绝访问，这里处理掉该异常 62 $frame[0].contentWindow.document.write(''); 63 $frame[0].contentWindow.close(); 64 } catch (e) { 65 //Do nothing 66 } 67 $frame.remove(); 68 if ($.browser.msie) { 69 CollectGarbage(); 70 } 71 } 72 $tabBody.html(''); 73 $tabBody.css({ 'overflow': 'hidden', 'position': 'relative' }); 74 var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody); 75 var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #95B8E7;padding: 12px 5px 10px 30px;background: url(\'/Content/EasyUI/themes/bootstrap/images/loading.gif\') no-repeat scroll 5px center #FFF;">' + (params.iframe.message || '正在加载，请稍候 ...') + '</div>').appendTo($tabBody); 76 var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody); 77 var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody); 78 79 var iframe = document.createElement("iframe"); 80 iframe.src = params.iframe.src; 81 iframe.frameBorder = params.iframe.frameBorder || 0; 82 iframe.height = params.iframe.height || '100%'; 83 iframe.width = params.iframe.width || '100%'; 84 if (iframe.attachEvent) { 85 iframe.attachEvent("onload", function () { 86 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 87 $(this).remove(); 88 if ($(this).hasClass('mask-message')) { 89 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 90 $(this).remove(); 91 }); 92 } 93 }); 94 }); 95 } else { 96 iframe.onload = function () { 97 $([$mask[0], $maskMessage[0]]).fadeOut(params.iframe.delay || 'slow', function () { 98 $(this).remove(); 99 if ($(this).hasClass('mask-message')) { 100 $containterMask.fadeOut(params.iframe.delay || 'slow', function () { 101 $(this).remove(); 102 }); 103 } 104 }); 105 }; 106 } 107 $containter[0].appendChild(iframe); 108 }); 109 }, 110 111 /** 112 * 增加iframe模式的标签页 113 * param {[type]} jq [description] 114 * param {[type]} params [description] 115 */ 116 addIframeTab: function (jq, params) { 117 return jq.each(function () { 118 if (params.tab.href) { 119 delete params.tab.href; 120 } 121 $(this).tabs('add', params.tab); 122 $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe }); 123 }); 124 }, 125 126 /** 127 * 更新tab的iframe内容 128 * param {jq Object} jq [description] 129 * param {Object} params [description] 130 * return {jq Object} [description] 131 */ 132 updateIframeTab: function (jq, params) { 133 return jq.each(function () { 134 params.iframe = params.iframe || {}; 135 if (!params.iframe.src) { 136 var $tab = $(this).tabs('getTab', params.which); 137 if ($tab == null) return; 138 var $tabBody = $tab.panel('body'); 139 var $iframe = $tabBody.find('iframe'); 140 if ($iframe.length === 0) return; 141 $.extend(params.iframe, { 'src': $iframe.attr('src') }); 142 } 143 $(this).tabs('loadTabIframe', params); 144 }); 145 } 146 }); 147 148 149 150 151 }); 152 153 154 155 //创建Frame 156 function createFrame(url) { 157 var s = '<iframe scrolling="hidden" frameborder="0" src="' + url + '" style="width:100%;height:98%;"></iframe>'; 158 return s; 159 }; 160 161 162 //添加tab页 163 function addTab(title, tabHref) { 164 if ($("#pageTab").tabs("exists", title)) { 165 $("#pageTab").tabs("select", title); 166 } else { 167 $('#pageTab').tabs('addIframeTab', { 168 tab: { title: title, closable: true }, 169 iframe: { src: tabHref } 170 }); 171 } 172 };
1.3控制器
首页控制器就是把SessionManage会话类中的信息取出来。部分代码如下：
//一级导航目录
IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList;
//操作权限页面
IList<Catalog> rightList = SessionManage.CurrentUser.RightList;
if (navigationList != null && navigationList.Count > 0)
{
IList<Catalog> currentRight =
(from item in rightList where item.ParentId == navigationList.First().CatalogId select item)
.ToList();
ViewBag.Navigation = navigationList;
ViewBag.RightList = currentRight;
}
public PartialViewResult RightMessage(int navigationId)
{
//根据一级导航信息，展示二级导航信息
}
IndexHomeController.cs控制器的详细代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using Session; 7 using OdbcDbAccess; 8 using System.Data; 9 using Models; 10 11 12 namespace CqReportSystem.Controllers 13 { 14 public class IndexHomeController : Controller 15 { 16 /// <summary> 17 /// **************************** 18 /// 功能：主页 19 /// 作者：王令 20 /// 时间：2015-7-18 21 /// 邮箱：1129137758@qq.com 22 /// **************************** 23 24 public ActionResult IndexHome() 25 { 26 if (SessionManage.CurrentUser == null) 27 { 28 Response.Redirect("/"); 29 } 30 else 31 { 32 //一级导航目录 33 IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList; 34 //操作权限页面 35 IList<Catalog> rightList = SessionManage.CurrentUser.RightList; 36 if (navigationList != null && navigationList.Count > 0) 37 { 38 IList<Catalog> currentRight = 39 (from item in rightList where item.ParentId == navigationList.First().CatalogId select item) 40 .ToList(); 41 ViewBag.Navigation = navigationList; 42 ViewBag.RightList = currentRight; 43 } 44 45 ViewData["UserName"] = SessionManage.CurrentUser.OperatorName; 46 } 47 return View(); 48 } 49 50 51 /// <summary> 52 /// 根据一级目录展示二级目录及访问页面 53 /// </summary> 54 /// <param name="navigationId"></param> 55 /// <returns></returns> 56 public PartialViewResult RightMessage(int navigationId) 57 { 58 if (SessionManage.CurrentUser == null) 59 { 60 Response.Write("<script> window.parent.location.href = '/Login/Login';</script>"); 61 } 62 else 63 { 64 IList<Catalog> rightList = SessionManage.CurrentUser.RightList; 65 if (navigationId == -1) 66 { 67 IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList; 68 navigationId = navigationList.First().CatalogId; 69 } 70 71 IList<Catalog> currentRight = 72 (from item in rightList where item.ParentId == navigationId select item) 73 .ToList(); 74 ViewBag.RightList = currentRight; 75 } 76 77 return PartialView("_rightMessage"); 78 } 79 80 81 public ActionResult Home() 82 { 83 return View(); 84 } 85 86 } 87 }
1.4运行页面
当以管理员身份登录时，运行界面如下：
当以一般用户登录时，运行界面如下：
喜欢请赞赏一下啦^_^
微信赞赏
支付宝赞赏
