预约系统 管理页面框架搭建easyUI
Posted youguess
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了预约系统 管理页面框架搭建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开发文档！
以上是关于预约系统 管理页面框架搭建easyUI的主要内容，如果未能解决你的问题，请参考以下文章