预约系统(四) 管理页面框架搭建easyUI
2024-10-06 22:54:04
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开发文档!
最新文章
- RMS:不能对生产服务器使用测试清单
- ListView使用item显示不同布局
- MySQL出现Access denied for user &#39;root&#39;@&#39;%&#39; to database &#39;netai_test&#39;问题
- 【iOS】Mac下SVN的服务器搭建
- FineUI第十三天---`列布局
- Nginx反向代理到Tomcat服务器
- node系列:琐碎备忘
- js获取上传文件内容(未完待续)
- ImageButton和Button区别
- Python中的map()函数和reduce()函数的用法
- SSH登录很慢问题的解决方法
- 【BZOJ1997】Planar(2-sat)
- 【原创】运维基础之Zabbix(1)简介、安装、使用
- anaconda安装qt错误
- Highcharts之折线图
- Java基础-多线程-②多线程安全问题
- Promise实例的catch方法
- 【转载】惠新宸:PHP在百度的应用现状及展望
- CDlinux无线破解系统
- 解决webpack环境变量NODE_ENV跨平台兼容性问题