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>

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

 <body class="easyui-layout">

         <!--顶部-->

         <div data-options="region:'north',border:false" style="height:80px;background:#007CB6;padding:10px;overflow:hidden;">

             <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>

             <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>

             <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>

             <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>

         </div>

         <!--左侧导航-->

         <div data-options="region:'west',split:true,title:'系统管理'" style="width:150px; padding:2px;">

             <div id="meeting" class="easyui-accordion" style="width:auto;height:100%; ">

                 <div title="" data-options="iconCls:'icon-ok'" style="overflow:auto; ">

                     <a id="meeting_1" class="detailLink123" href="javascript:void(0)" url="/Manage/UserInfo_Manage"><h3>用户管理</h3></a>

                     <a id="meeting_2" class="detailLink123" href="javascript:void(0)" url="/Manage/MeetingRoom_Manage"><h3>会议室管理</h3></a>

                     <a id="meeting_3" class="detailLink123" href="javascript:void(0)" url="/Manage/Bm_Manage"><h3>部门管理</h3></a>

                 </div>

             </div>

         </div>

         <!--中间部分-->

         <div data-options="region:'center'" @*style="overflow:hidden;"*@>

             <div id="tt" class="easyui-tabs" style="width:100%;height:100%" fit="true">

                 <div title="首页" style="padding:10px">

                     <iframe src="/Manage/Basepage" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>

                 </div>

             </div>

         </div>

 </body>

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

  <!--密码修改dialog-->

     <div id="dd_pass" style=" display:none; padding-top:15px;">

         <div style=" width:450px; margin:0px auto;">

             <table class="tb_dia">

                 <tr><td class="tb_lable">原密码:</td><td><input class="easyui-textbox" id="oldpassword" style="width:250px;" data-options="readonly:true"></td></tr>

                 <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>

                 <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>

             </table>

         </div>

     </div>

     <!--用户信息dialog-->

     <div id="dd_userinfo" style="display:none;padding-top:15px;">

         <div style="width:450px; margin:0px auto;">

             <table class="tb_dia">

                 <tr><td class="tb_lable">用户:</td><td><input id="user_name" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>

                 <tr><td class="tb_lable">邮箱:</td><td><input id="user_email" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>

                 <tr><td class="tb_lable">姓名:</td><td><input id="user_fullname" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>

                 <tr><td class="tb_lable">部门:</td><td><input id="user_bm" class="easyui-textbox" style="width:250px;" data-options="readonly:true"></td></tr>

             </table>

         </div>

     </div>

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

     <script type="text/javascript">

     $(function () {

         bindEvent();

     })

     //绑定事件

     function bindEvent() {

         $(".detailLink123").click(function () {

             var title = $(this).text();

             var url = $(this).attr("url");

             var isExt = $('#tt').tabs('exists', title);//判断页签是否已经存在

             if (isExt) {

                 $('#tt').tabs('select', title);//如果存在选中

                 return;

             }

             $('#tt').tabs('add', {//添加页签

                 title: title,

                 content: createContent(url),

                 closable: true

             });

         });

     }

     function createContent(url) {

         var strHtml = '<iframe src="' + url + '" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>';

         return strHtml;

     }

     </script>

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

   <script type="text/javascript">

     //退出

     $("#index_logout").click(function () {

         //

         $.messager.confirm('确认', '您确认想要退出吗？', function (r) {

             if (r) {

                 //session置空

                 $.ajax({

                     url: "/Home/SessiontoNull",

                     type: "post",

                     success: function (data) {

                         if (data == "ok") {

                             //跳转

                             window.location.href = "/Login/Index";

                         }

                         else {

                             window.location.href = "/Login/Index";

                             //$.messager.alert('警告', '系统异常！');

                         }

                     }

                 })

             }

         });

     })

     </script>

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

预约系统（四） 管理页面框架搭建easyUI的更多相关文章

  1. 基于mvc结构的前端页面框架搭建

    前端开发一年了,向大家交流下自己实践总结下来的一点点开发心得.人生难免磕磕碰碰,前进的道路很多,在学习工作上我们都得学会如何让自己过的更高效,代码亦是如此. 下面,开始介绍自己总结的前端框架搭建(布局 ...

  2. weex 项目开发（四）项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  3. 用jquery-easyui的布局layout写后台管理页面

    先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...

  4. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2 ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) 前言:这篇博客开始我们便一步一步的来实现这 ...

  6. 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架

    转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...

  7. SSM框架搭建（Spring+SpringMVC+MyBatis）与easyui集成并实现增删改查实现

    一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller        //控制类 service //服务接口 service.impl //服务 ...

  8. Django框架搭建（windows系统）

    Django框架搭建(windows系统) 一.Django简介 开放源代码的Web应用框架,由Python语言编写,一个大而全的框架. 1.web框架介绍 具体介绍Django之前,必须先介绍WEB ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

随机推荐

  1. Docker进阶-快速扩容

    1.命令方式 在创建好的Swarm集群中运行nginx服务,并使用--replicas参数指定启动的副本数. docker service create --replicas 3 -p 80:80 - ...

  2. IDEA无法通过类加载器获取resources文件夹配置文件解决办法

    问题描述:如果IDEA无法通过类加载器获取resources文件夹配置文件,一定是Classpath编译文件没有导致的. 1.在通过配置文件来获取文件信息时,在resouces文件中放入了filena ...

  3. How to Fix Grub error: no such partition Grub Rescue

    错误信息: error: no such partition Entering rescue mode... grub rescue> _ 错误原因: grub找不到文件normal.mod 解 ...

  4. mysql字符串函数：FIND_IN_SET（）使用方法详解

    语法: FIND_IN_SET(str,strlist) 第一个参数str是要查找的字符串. 第二个参数strlist是要搜索的逗号分隔的字符串列表. 假如字符串str 在由N 子链组成的字符串列表s ...

  5. echo、print、print_r之间的区别

    echo php语句:可以一次输出多个值,多个值之间用逗号隔开:没有返回值,输出标量的值.print 函数:只能打印简单类型变量的值(标量,如int,string),返回值为布尔型print_r 函数 ...

  6. 内置对象（Date String Math Array）

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  7. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

  8. 003-Spring4 扩展分析-spring类初始化@PostConstruct > InitializingBean > init-method、ApplicationContext、BeanPostProcessor、BeanFactoryPostProcessor、BeanDefinitionRegistryPostProcessor

    一.spring类初始化@PostConstruct > InitializingBean > init-method InitializingBean接口为bean提供了初始化方法的方式 ...

  9. 六十七：flask上下文之Local线程隔离对象

    Local对象在flask中,类似于request对象,其实是绑定到了werkzeug.local.Local对象上,这样即使是同一个对象,在多线程中都是隔离的,类似的对象还有session以及g对象 ...

  10. app测试自动化操作方法之三

    首先导包: from appium.webdriver.common.touch_action import TouchAction #(导包指针定位滑动手势密码那个) #设置手势密码(前提是在设备上 ...