项目框架：登录跳转页面
- 运行结果：
- 代码整体布局：
- 代码如下：
- proj_hr_yzh7.sql ：（数据表备份代码）
- pom.xml:
- web.xml:
- ForwardController :
- EmpMapper.xml:
- db.properties:
- mybatis-config.xml
- spring-mvc.xml:
- spring-mybatis.xml:
- emp.jsp:
- login.jsp:
- main.jsp:
运行结果：
代码整体布局：
代码如下：
proj_hr_yzh7.sql ：（数据表备份代码）
/*Navicat MySQL Data TransferSource Server : aaaSource Server Version : 80012Source Host : localhost:3306Source Database : proj_hr_yzh7Target Server Type : MYSQLTarget Server Version : 80012File Encoding : 65001Date: 2022-08-29 11:12:39*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for tbl_dept-- ----------------------------DROP TABLE IF EXISTS `tbl_dept`;CREATE TABLE `tbl_dept` ( `dept_id` int(11) NOT NULL AUTO_INCREMENT, `dept_name` varchar(20) DEFAULT NULL, `dept_desc` varchar(100) DEFAULT NULL, `state_flag` int(11) DEFAULT '0', `del_flag` int(11) DEFAULT '0', `create_by` varchar(20) DEFAULT NULL, `create_time` datetime DEFAULT NULL, `update_by` varchar(20) DEFAULT NULL, `update_time` datetime DEFAULT NULL, PRIMARY KEY (`dept_id`)) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_dept-- ----------------------------INSERT INTO `tbl_dept` VALUES ('1', '人事部', '管理员工', '0', '0', 'admin', '2022-08-29 10:17:41', null, null);INSERT INTO `tbl_dept` VALUES ('2', 'IT部', '管理系统', '0', '0', 'admin', '2022-08-29 10:17:41', null, null);-- ------------------------------ Table structure for tbl_emp-- ----------------------------DROP TABLE IF EXISTS `tbl_emp`;CREATE TABLE `tbl_emp` ( `emp_id` int(11) NOT NULL AUTO_INCREMENT, `emp_name` varchar(20) NOT NULL COMMENT '姓名', `username` varchar(20) DEFAULT NULL COMMENT '账号', `password` varchar(200) DEFAULT NULL COMMENT '密码', `sex` char(1) NOT NULL COMMENT '性别', `birthday` date DEFAULT NULL COMMENT '生日', `phone` varchar(11) NOT NULL COMMENT '手机', `email` varchar(50) NOT NULL COMMENT '邮箱', `address` varchar(100) DEFAULT NULL COMMENT '籍贯', `hire_date` date DEFAULT NULL COMMENT '入职日期', `leave_date` date DEFAULT NULL COMMENT '离职日期', `state_flag` int(11) DEFAULT '0' COMMENT '在职状态:0在职 1离职', `del_flag` int(11) DEFAULT '0' COMMENT '是否删除:0未删除 1删除', `avatar` varchar(200) DEFAULT NULL COMMENT '头像', `dept_id` int(11) DEFAULT NULL COMMENT '部门编号', `create_by` varchar(20) DEFAULT NULL COMMENT '创建人', `create_time` datetime DEFAULT NULL COMMENT '创建时间', `update_by` varchar(20) DEFAULT NULL COMMENT '修改人', `update_time` datetime DEFAULT NULL COMMENT '修改时间', PRIMARY KEY (`emp_id`)) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_emp-- ----------------------------INSERT INTO `tbl_emp` VALUES ('1', '张三', 'zhangsan', '123456', '男', '2000-01-01', '13112345678', 'aaa@qq.com', '河南', '2010-10-10', null, '0', '0', null, '1', 'admin', '2022-08-29 10:23:02', null, null);INSERT INTO `tbl_emp` VALUES ('2', '李四', 'lisi', '123456', '女', '2001-01-01', '13112345677', 'a22@qq.com', '河南', '2013-10-10', null, '0', '0', null, '2', 'admin', '2022-08-29 10:23:02', null, null);-- ------------------------------ Table structure for tbl_emp_role-- ----------------------------DROP TABLE IF EXISTS `tbl_emp_role`;CREATE TABLE `tbl_emp_role` ( `id` int(11) NOT NULL AUTO_INCREMENT, `emp_id` int(11) NOT NULL, `role_id` int(11) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_emp_role-- ----------------------------INSERT INTO `tbl_emp_role` VALUES ('1', '1', '1');INSERT INTO `tbl_emp_role` VALUES ('2', '2', '2');-- ------------------------------ Table structure for tbl_menu-- ----------------------------DROP TABLE IF EXISTS `tbl_menu`;CREATE TABLE `tbl_menu` ( `menu_id` int(11) NOT NULL, `menu_name` varchar(100) NOT NULL COMMENT '菜单名字', `parent_id` int(11) DEFAULT NULL COMMENT '父级菜单编号', `menu_type` varchar(10) DEFAULT NULL COMMENT '菜单类型', `url` varchar(100) DEFAULT NULL COMMENT '菜单链接', `icon` varchar(100) DEFAULT NULL COMMENT '菜单图标', `create_by` varchar(20) DEFAULT NULL, `create_time` datetime DEFAULT NULL, `update_by` varchar(20) DEFAULT NULL, `update_time` datetime DEFAULT NULL, PRIMARY KEY (`menu_id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_menu-- ----------------------------INSERT INTO `tbl_menu` VALUES ('1', '系统管理', '0', 'M', '#', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('2', '性格测试', '0', 'M', '#', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('3', '问卷调查', '0', 'M', '#', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('4', '日志监控', '0', 'M', '#', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('5', '部门管理', '1', 'C', '/forward/toDept', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('6', '员工管理', '1', 'C', '/forward/toEmp', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('7', '角色管理', '1', 'C', '/forward/toRole', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('8', '权限管理', '1', 'C', '/forward/toMenu', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('9', '题目管理', '2', 'C', '/forward/toQuestion', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('10', '测试管理', '2', 'C', '/forward/toQuestionTester', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('11', '报表统计', '2', 'C', '/forward/toQuestionReport', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('12', '问卷管理', '3', 'C', '/forward/toQuestionnaire', null, null, null, null, null);INSERT INTO `tbl_menu` VALUES ('13', '操作日志', '4', 'C', '/forward/toLog', null, null, null, null, null);-- ------------------------------ Table structure for tbl_role-- ----------------------------DROP TABLE IF EXISTS `tbl_role`;CREATE TABLE `tbl_role` ( `role_id` int(11) NOT NULL AUTO_INCREMENT, `role_name` varchar(20) NOT NULL, `role_desc` varchar(200) NOT NULL, `state_flag` int(11) DEFAULT '0', `del_flag` int(11) DEFAULT '0', `create_by` varchar(20) DEFAULT NULL, `create_time` datetime DEFAULT NULL, `update_by` varchar(20) DEFAULT NULL, `update_time` datetime DEFAULT NULL, PRIMARY KEY (`role_id`)) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_role-- ----------------------------INSERT INTO `tbl_role` VALUES ('1', '管理员', '管理员', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);INSERT INTO `tbl_role` VALUES ('2', '人事经理', '人事经理', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);INSERT INTO `tbl_role` VALUES ('3', '测试人员', '测试人员', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);-- ------------------------------ Table structure for tbl_role_menu-- ----------------------------DROP TABLE IF EXISTS `tbl_role_menu`;CREATE TABLE `tbl_role_menu` ( `id` int(11) NOT NULL AUTO_INCREMENT, `role_id` int(11) DEFAULT NULL, `menu_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;-- ------------------------------ Records of tbl_role_menu-- ----------------------------INSERT INTO `tbl_role_menu` VALUES ('1', '1', '1');INSERT INTO `tbl_role_menu` VALUES ('2', '1', '2');INSERT INTO `tbl_role_menu` VALUES ('3', '1', '3');INSERT INTO `tbl_role_menu` VALUES ('4', '1', '4');INSERT INTO `tbl_role_menu` VALUES ('5', '1', '5');INSERT INTO `tbl_role_menu` VALUES ('6', '1', '6');INSERT INTO `tbl_role_menu` VALUES ('7', '1', '7');INSERT INTO `tbl_role_menu` VALUES ('8', '1', '8');INSERT INTO `tbl_role_menu` VALUES ('9', '1', '9');INSERT INTO `tbl_role_menu` VALUES ('10', '1', '10');INSERT INTO `tbl_role_menu` VALUES ('11', '1', '11');INSERT INTO `tbl_role_menu` VALUES ('12', '1', '12');INSERT INTO `tbl_role_menu` VALUES ('13', '1', '13');INSERT INTO `tbl_role_menu` VALUES ('16', '2', '1');INSERT INTO `tbl_role_menu` VALUES ('17', '2', '5');INSERT INTO `tbl_role_menu` VALUES ('18', '2', '6');INSERT INTO `tbl_role_menu` VALUES ('19', '2', '7');INSERT INTO `tbl_role_menu` VALUES ('20', '2', '8');
pom.xml:
4.0.0 org.example lesson0829_HRProj 1.0-SNAPSHOT war lesson0829_HRProj Maven Webapp http://www.example.com 8 8 4.0.1 2.2 1.2 5.3.14 1.4 3.4.6 1.3.3 8.0.11 1.2.78 javax.servlet javax.servlet-api ${servlet.version} provided javax.servlet.jsp jsp-api ${jsp.version} provided jstl jstl ${jstl.version} org.springframework spring-webmvc ${spring.version} org.springframework spring-jdbc ${spring.version} commons-dbcp commons-dbcp ${commons-dbcp.version} org.mybatis mybatis ${mybatis.version} org.mybatis mybatis-spring ${mybatis-spring.version} com.github.pagehelper pagehelper 5.1.0 com.github.abel533 mapper 3.0.1 mysql mysql-connector-java ${mysql-connector-java.version} com.alibaba fastjson ${fastjson.version} org.projectlombok lombok 1.18.24 com.fasterxml.jackson.core jackson-databind 2.13.2.2
web.xml:
contextConfigLocation classpath:spring-mybatis.xml org.springframework.web.context.ContextLoaderListener characterEncodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding UTF-8 characterEncodingFilter /* springMVC org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:spring-mvc.xml 1 springMVC <!--凡是以.do结尾的请求都让springMVC来处理 *.do --> /
ForwardController :
package com.aaa.hr.controller;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping("/forward")public class ForwardController { @RequestMapping(path = {"/toLogin","/"}) public String toLogin(){ return "login"; } @RequestMapping("/toMain") public String toMain(Model model){ //应该查询左侧菜单数据，渲染到页面上 return "main"; } @RequestMapping("/toEmp") public String toEmp(){ return "emp"; }}
EmpMapper.xml:
db.properties:
jdbc.driver=com.mysql.cj.jdbc.Driverjdbc.url=jdbc:mysql://localhost:3306/proj_hr_yzh7?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8&allowPublicKeyRetrieval=truejdbc.username=rootjdbc.password=123456
mybatis-config.xml
<!----> <!---->
spring-mvc.xml:
spring-mybatis.xml:
emp.jsp:
后台主页 -请选择- 男 女 - -请选择-
- 男
- 女
北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区海外- 请选择
- 北京市
- 天津市
- 河北省
- 山西省
- 内蒙古自治区
- 辽宁省
- 吉林省
- 黑龙江省
- 上海市
- 江苏省
- 浙江省
- 安徽省
- 福建省
- 江西省
- 山东省
- 河南省
- 湖北省
- 湖南省
- 广东省
- 广西壮族自治区
- 海南省
- 重庆市
- 四川省
- 贵州省
- 云南省
- 西藏自治区
- 陕西省
- 甘肃省
- 青海省
- 宁夏回族自治区
- 新疆维吾尔自治区
- 台湾省
- 香港特别行政区
- 澳门特别行政区
- 海外
- 请选择
- 请选择
--请选择-- 管理部人事部盘点部- --请选择--
- 管理部
- 人事部
- 盘点部
--请选择-- 店长盘点员普通员工财务员老板- --请选择--
- 店长
- 盘点员
- 普通员工
- 财务员
- 老板
--请选择-- 任职 冻结 - --请选择--
- 任职
- 冻结
--请选择-- - --请选择--
--请选择-- 管理部人事部盘点部- --请选择--
- 管理部
- 人事部
- 盘点部
--请选择-- 店长盘点员普通员工财务员老板- --请选择--
- 店长
- 盘点员
- 普通员工
- 财务员
- 老板
搜索
--请选择部门-- 管理部人事部盘点部- --请选择部门--
- 管理部
- 人事部
- 盘点部
--请选择分店-- 总店北京二号店北京一号店1北京朝阳区分店河南郑州一号店- --请选择分店--
- 总店
- 北京二号店
- 北京一号店1
- 北京朝阳区分店
- 河南
- 郑州一号店
| 员工编号 | 姓名 | 性别 | 年龄 | 身份证号 | 电话号 | 家庭住址 | 入职时间 | 离职时间 | 部门编号 | 职位编号 | 职位 | 部门 | 分店 | 员工状态 | 操作 |
|---|
| 1 | 老王 | 女 | 19 | 412569875615356489 | 16359489654 | 河南省洛阳市伊川县 | 2021-07-26 00:00:00 | | | | 老板 | 管理部 | 总店 | | 编辑 |
| 29 | 老李 | 男 | 2 | 165635945896535648 | 12313123111 | 北京市北京市丰台区 | 2021-07-15 12:59:50 | | | | 店长 | 管理部 | 北京一号店1 | | 编辑 |
| 31 | 老张 | 男 | 12 | 410329200007081514 | 12653654896 | 辽宁省沈阳市苏家屯区 | 2021-07-29 04:34:39 | | | | 店长 | 管理部 | 北京朝阳区分店 | | 编辑 |
| 32 | 老白 | 男 | 12 | 213123659458635456 | 15689654532 | 河北省石家庄市藁城区 | 2021-07-29 09:54:18 | | | | 店长 | 管理部 | 北京二号店 | | 编辑 |
| 37 | 小王 | 男 | 18 | 413029194551549781 | 18337954615 | 辽宁省沈阳市皇姑区 | 2021-07-28 21:44:45 | | | | 店长 | 管理部 | 总店 | | 编辑 |
| 编辑 |
| 编辑 |
| 编辑 |
| 编辑 |
| 编辑 |
12到第页共 8 条5 条/页10 条/页15 条/页20 条/页.laytable-cell-1-0-0{ }.laytable-cell-1-0-1{ }.laytable-cell-1-0-2{ }.laytable-cell-1-0-3{ }.laytable-cell-1-0-4{ }.laytable-cell-1-0-5{ }.laytable-cell-1-0-6{ }.laytable-cell-1-0-7{ }.laytable-cell-1-0-8{ }.laytable-cell-1-0-9{ }.laytable-cell-1-0-10{ }.laytable-cell-1-0-11{ }.laytable-cell-1-0-12{ }.laytable-cell-1-0-13{ }.laytable-cell-1-0-14{ }.laytable-cell-1-0-15{ width: 220px; } 编辑 {{# if(d.sfstatus == 1){ }} {{# } else if(d.sfstatus == 2){ }} {{# } }} {{# if(d.sfstatus == 1){ }} {{# } else if(d.sfstatus == 2){ }} {{# } }} layui.config({ base: '/huawei/./mods/' , version: '1.0' }); //地区三级联动 layui.use(['layer', 'form', 'jquery', 'layarea_lc'], function () { var layer = layui.layer , form = layui.form , $ = layui.jquery , layarea_lc = layui.layarea_lc; layarea_lc.render({ elem: '#area-picker', data: { province: '--选择省--', city: '--选择市--', county: '--选择区--', }, name: "name" , change: function (res) { //选择结果 } }); form.on('select(county-1)', function (data) { var p = $("#province").val(); var c = $("#city").val(); var a = $("#county").val(); $("#address").attr("value", p + c + a); }); }) {{# if(d.sfsex === '女'){ }} {{ d.sfsex }} {{# } else { }} {{ d.sfsex }} {{# } }} //js方式获取本地时间+1天 Date.prototype.toLocaleStringTomorrow = function () { var dateTime = new Date(); dateTime = dateTime.setDate(dateTime.getDate() + 1); dateTime = new Date(dateTime); var y = dateTime.getFullYear(); var m = dateTime.getMonth() + 1; m = m 60){ layer.msg("年龄不符合我公司规定呀"); sx(); } }) $("#sftel").blur(function () { var aaa1 = $("#sftel").val(); if (aaa1.length != 11) { layer.msg("手机号位数有误") sub = sub + 1; } else if (aaa1.substring(0, 1) != 1) { layer.msg("手机号格式错误"); sub = sub + 1; } }) $("#sfcode").bind("input", function () { $.post("/huawei/staff/getSfCode", {"sfcode": $("#sfcode").val()}, function (backdata) { if (backdata.code == 2) { sub = sub + 1; layer.msg('身份证号重复呢，请重新填写', {icon: 5}) sx(); } else { sub = 0; xx(); } }, 'json') }); /*/!*员手机号验证*!/*/ $("#sftel").blur(function () { var phone = $("#sftel").val(); $.ajax({ url:'/huawei/staff/getTel', type:"POST", data:{"sftel":sftel}, async: false, dataType:"json", success:function (result) { if (result.code==1){//手机号不重复 xx(); }else{//手机号重复 layer.msg("手机号重复"); sx(); } } }) }) //页面加载完后 填充部门类型的下拉框 $.ajax({ url: "/huawei/department/getAllDepartment", type: "get", dataType: "json", success: function (dptypes) { //将查到的部门类型信息填充到类型下拉框中 $.each(dptypes, function (i, obj) { $("#dpType").append( $("").attr("value", obj["dpid"]).text(obj["dpname"]) ) $("#dpType1").append( $("").attr("value", obj["dpid"]).text(obj["dpname"]) ) $("#searchType").append( $("").attr("value", obj["dpid"]).text(obj["dpname"]) ) }) //执行表单的更新渲染方法 form.render('select'); /*$.each(types,function (i, obj) { })*/ } }) $.ajax({ url: "/huawei/position/getAllPosition2", type: "get", dataType: "json", success: function (pstypes) { //将查到的职位类型信息填充到类型下拉框中 $.each(pstypes, function (i, obj) { $("#psType").append( $("").attr("value", obj["rid"]).text(obj["pttype"]) ) $("#psType1").append( $("").attr("value", obj["rid"]).text(obj["pttype"]) ) }) //执行表单的更新渲染方法 form.render('select'); /*$.each(types,function (i, obj) { })*/ } }) $.ajax({ url: "/huawei/branch/getAllBranch", type: "get", dataType: "json", success: function (brtypes) { //将查到的部门类型信息填充到类型下拉框中 $.each(brtypes, function (i, obj) { $("#brType").append( $("").attr("value", obj["brid"]).text(obj["brname"]) ) $("#branchType").append( $("").attr("value", obj["brid"]).text(obj["brname"]) ) }) //执行表单的更新渲染方法 form.render('select'); /*$.each(types,function (i, obj) { })*/ } }) //表单的提交事件 //监听事件 form.on('submit(formDemo)', function (data) { //向后台发送请求 $.ajax({ url: '/huawei/staff/addOrUpdStaff', type: "POST", data: data.field, //因为layui 在表单提交时 有时候会自动拦截我们的异步请求 //所以此处改位同步请求 async: false, dataType: "json", success: function (result) { layer.closeAll(); if (result.code == 1) { //重载表格 layer.msg(result.msg, {icon: 1}); table.reload("test"); } else { layer.msg(result.msg, {icon: 5}); } } }) return false; }); form.on('submit(formDemo2)', function (data) { //向后台发送请求 $.ajax({ url: '/huawei/move/moveStaff', type: "POST", data: data.field, //因为layui 在表单提交时 有时候会自动拦截我们的异步请求 //所以此处改位同步请求 async: false, dataType: "json", success: function (result) { layer.closeAll(); if (result.code == 1) { layer.msg(result.msg, {icon: 1}); table.reload("test"); } else { layer.msg(result.msg, {icon: 5}); } } }) return false; }); //搜索时，执行表格的重载事件 $("#staffSearch").click(function () { table.reload('test', { page: { curr: 1 //重新从第 1 页开始 }, where: { //设定异步数据接口的额外参数，任意设 sfid: $("#sfid").val(), sfname: $("#sfname").val(), dpid: $("#searchType").val(), testtime: $("#test10").val(), brid: $("#branchType").val() } }); //只重载数据 }) //加载表格的实例 table.render({ id: "test", //elem element 元素---》表格的容器 elem: '#demo'//table标签的id属性值 , cellMinWidth: 80 , url: '/huawei/staff/getAllStaff' //数据接口 , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 , cols: [[ //表头 {field: 'sfid', title: '员工编号', sort: true, align: 'center'} , {field: 'sfname', title: '姓名', align: 'center'} , {field: 'sfsex', title: '性别', align: 'center', sort: true, templet: '#sexTpl'} , {field: 'sfage', title: '年龄', align: 'center'} , {field: 'sfcode', title: '身份证号'} , {field: 'sftel', title: '电话号'} , {field: 'sfaddress', title: '家庭住址'} , {field: 'sfentry', title: '入职时间', sort: true} , {field: 'sfquit', title: '离职时间', hide: true} , {field: 'dpid', title: '部门编号', hide: true} , {field: 'rid', title: '职位编号', hide: true} , { field: 'position.pttype', title: '职位', align: 'center', templet: function (data) { return data.position.pttype; } } , { field: 'department.dpname', title: '部门', align: 'center', templet: function (data) { return data.department.dpname; } } , { field: 'branch.brname', title: '分店', align: 'center', templet: function (data) { return data.branch.brname; } } , {field: 'sfstatus', title: '员工状态', align: 'center', templet: '#titleTpl'} , {fixed: 'right', title: '操作', width: 220, toolbar: '#barDemo'} ]], even: true, page: true,//开启分页 limit: 5,//默认每页显示的条数 limits: [5, 10, 15, 20]//自定义分页条数的选择 }); //头工具栏事件 //toolbar()括号中的参数就是 table容器中 lay-filter属性的值 table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { /** * case后边的具体字符串跟 toolbarDemo中的 lay-event属性值一样 */ case 'add': $("#area-picker").css("display", "block"); $("#dp").css("display", "block"); $("#ps").css("display", "block"); $("#sta").css("display", "block"); //先执行清空表单的方法，再打开弹出框 $("#staffForm")[0].reset(); layer.open({ type: 1, title: '新增员工信息', content: $("#staffForm"), //这里content是一个普通的String area: ['400px', '640px'], offset: 't' }); break; case 'refresh': table.reload('test', { page: { curr: 1 //重新从第 1 页开始 } }); //只重载数据 break; } ; }); //监听行工具事件 tool()括号中的参数就是 table容器中 lay-filter属性的值 table.on('tool(test)', function (obj) { //取出当前点击的行的数据 var data = obj.data; if (obj.event === 'upStatus') { layer.confirm("真的要解冻/冻结吗？", function (index) { $.ajax({ type: 'get' , url: '/huawei/staff/updStatus' , data: {"sfid": data.sfid, "sfstatus": data.sfstatus} , dataType: 'json' , success: function (result) { if (result.code == 1) { layer.msg(result.msg, {icon: 5}); table.reload("test"); } layer.msg(result.msg, {icon: 1}); } }) layer.close(index); }) } else if (obj.event === 'upQuitStatus') { layer.confirm("确定要炒他鱿鱼吗？", function (index) { $.ajax({ type: 'get' , url: '/huawei/staff/updQuitStatus' , data: {"sfid": data.sfid, "sfstatus": data.sfstatus} , dataType: 'json' , success: function (result) { if (result.code == 1) { layer.msg(result.msg, {icon: 5}); table.reload("test"); } layer.msg(result.msg, {icon: 1}); } }) layer.close(index); }) } else if (obj.event === 'updateStaff') { $("#area-picker").css("display", "none"); $("#dp").css("display", "none"); $("#ps").css("display", "none"); $("#sta").css("display", "none"); //先执行清空表单的方法，再打开弹出框 $("#staffForm")[0].reset(); layer.open({ type: 1, title: '修改员工信息', content: $("#staffForm"), //这里content是一个普通的String area: ['400px', '480px'], offset: 't' }); //填充表单 data.dpid = data.department.dpid; data.rid = data.position.rid; form.val('staffForm', data); } else if (obj.event === 'pdUpdate') { layer.open({ type: 1, title: '员工平调', content: $("#branchForm"), //这里content是一个普通的String area: ['400px', '480px'], offset: 't' }) form.val('branchForm', { "sfid": data.sfid, "brname": data.branch.brname, "sfname": data.sfname, "dpname": data.department.dpname, "pttype": data.position.pttype, "dpid": "", "rid": "", "brid": "" }); $.ajax({ url: "/huawei/branch/getAllNotId", type: "get", dataType: "json", data: {"brid":1}, success: function (brtypes) { $("#branchType").empty() $("#branchType").append($("").attr("value", "").text('--请选择分店--')) //将查到的部门类型信息填充到类型下拉框中 $.each(brtypes, function (i, obj) { $("#brType1").append( $("").attr("value", obj["brid"]).text(obj["brname"]) ) }) //执行表单的更新渲染方法 form.render('select'); } }) } }); });
login.jsp:
body{ background-image: url("assets/img/bj.jpeg"); background-repeat:no-repeat; -moz-background-size:100% 100%; background-attachment:fixed; } .layui-card{ background:rgba(256,256,256,0.9); width: 400px; height: 250px; box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7); position: absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; } .layui-card-body{ width: 350px; height: 350px; } 欢迎登录 layui.use(["form","layer"],function(){ var form = layui.form; var layer = layui.layer; form.on("submit(login)",function(data){ //layer.msg(JSON.stringify(data.field),{time:2000}); //$.ajax({}); window.location.href="${pageContext.request.contextPath}/forward/toMain"; }) }) // 防止后退 history.pushState(null, null, document.URL); window.addEventListener("popstate", function() { history.pushState(null, null, document.URL); });
main.jsp:
后台主页 LayUI后台管理系统 -
张三 - 基本资料
- 修改密码
- 退出
<!-- - ${fatherMenu.mname}
- ${sonmenu.mname}
--> - 人事管理
- 员工信息
- 部门信息
- 角色信息
- 商品管理
- 商品信息
- 统计管理
- 统计信息
LayUI后台管理系统
var ids = 0; layui.use('element', function() { var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件 var active = { tabAdd: function() { //新增一个Tab项 element.tabAdd('demo', { title: '新选项' + (Math.random() * 1000 | 0) //用于演示 , content: '内容' + (Math.random() * 1000 | 0), id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) }, tabDelete: function(id) { //删除指定Tab项 element.tabDelete('demo', id); //删除：“商品管理” ids = 0; //othis.addClass('layui-btn-disabled'); 添加样式 }, tabDeleteAll: function(idss) { $.each(idss, function(i, item) { element.tabDelete('demo', item); //删除所有 }); ids = 0; }, tabChange: function(id) { //切换到指定Tab项 element.tabChange('demo', id); //切换到：用户管理 //tabDelete(id); //ltabAdd(); }, ltabAdd: function(url, id, name) { //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值 //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分 element.tabAdd('demo', { title: name, content: '', id: id //规定好的id }); CustomRightClick(id); //给tab绑定右击事件 FrameWH(); //计算ifram层的大小 } }; $("#aaa").click(function() { layer.confirm('是否重新登录?', function(index) { top.location.href = "${pageContext.request.contextPath}/login.jsp"; }); }) //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件 $('.site-demo-active').on('click', function() { var dataid = $(this); //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目 if ($(".layui-tab-title li[lay-id]").length 1) { return true; } popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性 //判断右侧菜单的位置 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; popupmenu.css({ left: l - 190, top: t - 50 }).show(); //进行绝对定位 //alert("右键菜单") return false; }); } $(".rightmenu li").click(function() { //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。 if ($(this).attr("data-type") == "closethis") { //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete active.tabDelete($(this).attr("data-id")); } else if ($(this).attr("data-type") == "closeall") { var tabtitle = $(".layui-tab-title li"); var ids = new Array(); $.each(tabtitle, function(i) { ids[i] = $(this).attr("lay-id"); }) //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll active.tabDeleteAll(ids); } else if ($(this).attr("data-type") == "closeothe") { var id = $(this).attr("data-id"); var tabtitle = $(".layui-tab-title li"); var ids = new Array(); $.each(tabtitle, function(i) { if (id != $(this).attr("lay-id")) { ids[i] = $(this).attr("lay-id"); } }) active.tabDeleteAll(ids); } $('.rightmenu').hide(); //最后再隐藏右键菜单 }) });
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';
// A code blockvar foo = 'bar';