预约系统（四） 管理页面框架搭建easyUI

Manage控制器用于管理页面

Index视图为管理页面首页，采用easyUi的后台管理框架

 

Html头部调用，jquery库，easyui库，easyui.css，icon.css，语言包

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>管理页面</title>


    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <link href="~/Content/DarkBlue/easyui.css" rel="stylesheet" />
    <link href="~/Content/DarkBlue/icon.css" rel="stylesheet" />
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>


</head>

 

页面主体部分，顶部，左侧，中间部分

 1 <body class="easyui-layout">
 2   
 3         <!--顶部-->
 4         <div data-options="region:'north',border:false" style="height:80px;background:#007CB6;padding:10px;overflow:hidden;">
 5             <div style=" height:80px;text-align:left;width:300px;font-size:25px;padding-top:10px;padding-left:15px;color:#FFFFFF;font-weight:bolder;letter-spacing:5px;margin-left:50px; float:left;">鲜活预约系统管理</div>
 6             <div class="top_right" id="index_logout" style="height:40px;width:75px; margin-top:20px; float:right; margin-right:2px;"><a href="javascript:void(0)"><span>退出</span></a></div>
 7             <div class="top_right" id="pass_edit" style="height:40px;width:75px; margin-top:20px; float:right; margin-right:2px;"><a href="javascript:void(0)"><span>密码修改</span></a></div>
 8             <div class="top_right" id="user_info" style="height:40px;width:75px; margin-top:20px; float:right; margin-right:2px;"><a href="javascript:void(0)"><span>用户信息</span></a></div>
 9         </div>
10 
11 
12         <!--左侧导航-->
13         <div data-options="region:'west',split:true,title:'系统管理'" style="width:150px; padding:2px;">
14             <div id="meeting" class="easyui-accordion" style="width:auto;height:100%; ">
15                 <div title="" data-options="iconCls:'icon-ok'" style="overflow:auto; ">
16                     <a id="meeting_1" class="detailLink123" href="javascript:void(0)" url="/Manage/UserInfo_Manage"><h3>用户管理</h3></a>
17                     <a id="meeting_2" class="detailLink123" href="javascript:void(0)" url="/Manage/MeetingRoom_Manage"><h3>会议室管理</h3></a>
18                     <a id="meeting_3" class="detailLink123" href="javascript:void(0)" url="/Manage/Bm_Manage"><h3>部门管理</h3></a>
19                 </div>
20 
21             </div>
22         </div>
23 
24         <!--中间部分-->
25         <div data-options="region:'center'" @*style="overflow:hidden;"*@>
26             <div id="tt" class="easyui-tabs" style="width:100%;height:100%" fit="true">
27                 <div title="首页" style="padding:10px">
28                     <iframe src="/Manage/Basepage" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
29 
30                 </div>
31             </div>
32         </div>
33 
34 </body>

密码修改和用户信息的对话框，div显示隐藏：display:none，需要的时候显示出来

 1  <!--密码修改dialog-->
 2     <div id="dd_pass" style=" display:none; padding-top:15px;">
 3         <div style=" width:450px; margin:0px auto;">
 4             <table class="tb_dia">
 5                 <tr><td class="tb_lable">原密码:</td><td><input class="easyui-textbox" id="oldpassword" style="width:250px;" data-options="readonly:true"></td></tr>
 6                 <tr><td class="tb_lable">新密码:</td><td><input class="easyui-textbox" id="pass_new" style="width:250px;" data-options="required:true,type:'password'"></td></tr>
 7                 <tr><td class="tb_lable">重复密码:</td><td><input class="easyui-textbox" id="new_re" style="width:250px;" data-options="required:true,type:'password'"></td></tr>
 8             </table>
 9         </div>
10     </div>
11 
12     <!--用户信息dialog-->
13     <div id="dd_userinfo" style="display:none;padding-top:15px;">
14         <div style="width:450px; margin:0px auto;">
15             <table class="tb_dia">
16                 <tr><td class="tb_lable">用户:</td><td><input id="user_name" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>
17                 <tr><td class="tb_lable">邮箱:</td><td><input id="user_email" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>
18                 <tr><td class="tb_lable">姓名:</td><td><input id="user_fullname" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>
19                 <tr><td class="tb_lable">部门:</td><td><input id="user_bm" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>
20             </table>
21         </div>
22     </div>

 

jQuery代码：左侧导航链接点击，中间部分显示url的网页

 1     <script type="text/javascript">
 2     $(function () {
 3         bindEvent();
 4     })
 5 
 6     //绑定事件
 7     function bindEvent() {
 8         $(".detailLink123").click(function () {
 9             var title = $(this).text();
10             var url = $(this).attr("url");
11             var isExt = $('#tt').tabs('exists', title);//判断页签是否已经存在
12             if (isExt) {
13                 $('#tt').tabs('select', title);//如果存在选中
14                 return;
15             }
16             $('#tt').tabs('add', {//添加页签
17                 title: title,
18                 content: createContent(url),
19                 closable: true
20             });
21 
22         });
23     }
24 
25     function createContent(url) {
26         var strHtml = '<iframe src="' + url + '" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>';
27         return strHtml;
28     }
29     </script>

 

**退出功能：弹出一个提示框，然后将session清空，页面跳转到登录页面

 1   <script type="text/javascript">
 2     //退出
 3     $("#index_logout").click(function () {
 4         //
 5         $.messager.confirm('确认', '您确认想要退出吗？', function (r) {
 6             if (r) {
 7                 //session置空
 8                 $.ajax({
 9                     url: "/Home/SessiontoNull",
10                     type: "post",
11                     success: function (data) {
12                         if (data == "ok") {
13                             //跳转
14                             window.location.href = "/Login/Index";
15                         }
16                         else {
17                             window.location.href = "/Login/Index";
18                             //$.messager.alert('警告', '系统异常！');
19                         }
20                     }
21                 })
22             }
23         });
24     })
25     </script>

 

相关的标签参考easyui开发文档！

posted @ 2017-07-13 14:26  youguess  阅读(1410)  评论(0)  编辑  收藏  举报