预约系统（四） 管理页面框架搭建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>
页面主体部分，顶部，左侧，中间部分
<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的更多相关文章
- 基于mvc结构的前端页面框架搭建
前端开发一年了,向大家交流下自己实践总结下来的一点点开发心得.人生难免磕磕碰碰,前进的道路很多,在学习工作上我们都得学会如何让自己过的更高效,代码亦是如此. 下面,开始介绍自己总结的前端框架搭建(布局 ...
- weex 项目开发（四）项目框架搭建 及 自定义 TabBar 组件
1.安装 路由模块 及 状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义 TabBar 组件 src / ...
- 用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) 前言:这篇博客开始我们便一步一步的来实现这 ...
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...
- SSM框架搭建（Spring+SpringMVC+MyBatis）与easyui集成并实现增删改查实现
一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller //控制类 service //服务接口 service.impl //服务 ...
- Django框架搭建（windows系统）
Django框架搭建(windows系统) 一.Django简介 开放源代码的Web应用框架,由Python语言编写,一个大而全的框架. 1.web框架介绍 具体介绍Django之前,必须先介绍WEB ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
随机推荐
- TCP最大报文段长度MSS
最大报文段长度(MSS)表示TCP传往另一端的最大数据库的长度.当一个连接建立时,连接的双方都要通告各自需要接收的MSS选项(MSS选项只能出现在SYN报文段中).如果一方不接收来自另一方的MSS值, ...
- linux开启数据库远程连接
1.阿里云开启数据库端口 3306 2. 修改 Mysql-Server 用户配置 mysql -uroot -p(注意此用户必须要有最高级权限才行 默认root用户) mysql> USE m ...
- vscode如何使用命令面板
vscode如何使用命令面板 方法/步骤 首先找到vscode. 进入,打开页面. 找到查看. 打开找到命令面板. 选择打开,可以看到命令. 下拉还有多个,以及快捷键. ...
- mongodb aggregate 聚合 操作（扁平化flatten）
mongodb自带的函数非常多,最近用mongo做持久化数据库,遇到一个需求:子文档是个数组,把数组里的各个字段扁平化合到根文档中,查过资料后(主要是mongodb的文档和stackoverflow) ...
- PHP AJAX返回 "TEXT"
例子:通过AJAX间接访问数据库,查出Nation表显示在页面上,并添加删除按钮 //首先在外层添加一个按钮,并造好表头 <div><input type="button& ...
- [SPSS]如何利用spss进行单侧检验
根据网上经验来看,结论如下: 单双侧t检验,t值不变,p值除以2即为单侧p值.
- linux 文件锁flock,lockf,fcntl
1.flock,lockf,fcntl之间区别 先上结论:flock是文件锁,锁的粒度是整个文件,就是说如果一个进程对一个文件加了LOCK_EX类型的锁,别的进程是不能对这个文件加锁的. lockf是 ...
- mongodb游标的使用
1.插入数据 ;i<;i++){ db.shop.insert({_id:i+,name:+i}) } 2.查看数据数 db.shop.find().count() 3.获取游标.判断是否还存在 ...
- openstack核心组件--keystone（1）
一.keystone介绍 keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等 ...
- 根据XML文件 生成 java类
最近一直在做关于webservice 的项目,这种项目最麻烦的就是根据对方的要求产生XML,文档里面虽然有XML结构,但是要转化为java里面的实体实在费劲, 有个自动化的工具就好了,半自动化也好,省 ...