pxrztuq3h
/
Dormitory_Management_System
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pxrztuq3h:main
Branches Tags
pxrztuq3h:develop
pxrztuq3h:branch_li
pxrztuq3h:branch_liu
pxrztuq3h:branch_shen
pxrztuq3h:branch_wang
pxrztuq3h:main
..
compare: pxrztuq3h:branch_shen
Branches Tags
pxrztuq3h:develop
pxrztuq3h:branch_li
pxrztuq3h:branch_liu
pxrztuq3h:branch_shen
pxrztuq3h:branch_wang
pxrztuq3h:main

14 Commits
main ... branch_she

Author SHA1 Message Date
shen 0e97a6ac63 5
11 months ago
shen 64d272d9a9 5
11 months ago
shen 2c7993443a 5
11 months ago
shen 14d3410f7b 5
11 months ago
shen d9fe360dd9 4
11 months ago
shen 0d66630248 3
11 months ago
shen 30e89a98a7 2
11 months ago
shen 74a8a886b3 1
11 months ago
shen 582624afa9 ss
11 months ago
shen f5fd8283b6 dd
11 months ago
shen d3c44841ef dd
11 months ago
shen 193fa5b67e dd
11 months ago
shen e87530308b dd
11 months ago
shen 7f3aa64603 dd
11 months ago
14 changed files with 2398 additions and 2315 deletions
Show Stats

81
src/main/java/cn/ppdxzz/controller/StudentController.java
Unescape View File

@ -22,15 +22,14 @@ import java.util.List;
/** /**
* Description: * Description:
*
* @Date: 2020/2/17 14:17
* @Author: PeiChen
*/ */
@Controller @Controller
@RequestMapping("/student") @RequestMapping("/student")
public class StudentController { public class StudentController {
private StudentService studentService; private StudentService studentService;
@Autowired @Autowired
public void setStudentService(StudentService studentService) { public void setStudentService(StudentService studentService) {
this.studentService = studentService; this.studentService = studentService;
@ -38,6 +37,7 @@ public class StudentController {
/** /**
* 查询所有学生信息 * 查询所有学生信息
*
* @param page * @param page
* @param size * @param size
* @param request * @param request
@ -46,6 +46,27 @@ public class StudentController {
* @throws Exception * @throws Exception
*/ */
@RequestMapping("/findAll") @RequestMapping("/findAll")
public class StudentController {
private StudentService studentService;
@Autowired
public void setStudentService(StudentService studentService) {
this.studentService = studentService;
}
/**
* 查询所有学生信息
*
* @param page 当前页码
* @param size 每页显示的记录数
* @param request HTTP请求对象
* @param response HTTP响应对象
* @return ModelAndView 包含分页数据和视图名称
* @throws Exception 抛出异常
*/
@RequestMapping("/findAll")
public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception { public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8");
@ -57,19 +78,18 @@ public class StudentController {
} else { } else {
list = studentService.search(page, size, keyword); list = studentService.search(page, size, keyword);
} }
//PageInfo就是一个封装了分页数据的bean
PageInfo pageInfo = new PageInfo(list); PageInfo pageInfo = new PageInfo(list);
mv.addObject("pageInfo", pageInfo); mv.addObject("pageInfo", pageInfo);
mv.setViewName("student-list"); mv.setViewName("student-list");
return mv; return mv;
} }
/** /**
* 根据学号删除学生 * 根据学号删除学生
* @param request *
* @param response * @param request HTTP请求对象
* @throws Exception * @param response HTTP响应对象
* @throws Exception 抛出异常
*/ */
@RequestMapping("/delete") @RequestMapping("/delete")
public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception { public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -82,14 +102,14 @@ public class StudentController {
} }
studentService.delete(sno); studentService.delete(sno);
writer.write("true"); writer.write("true");
} }
/** /**
* 判断指定学号是否存在 * 判断指定学号是否存在
* @param request *
* @param response * @param request HTTP请求对象
* @throws Exception * @param response HTTP响应对象
* @throws Exception 抛出异常
*/ */
@RequestMapping("/isExist") @RequestMapping("/isExist")
public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception { public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -101,9 +121,7 @@ public class StudentController {
if (isExist == null) { if (isExist == null) {
return; return;
} }
//如果isExist不为空说明学号已被注册
writer.write("true"); writer.write("true");
} }
@RequestMapping("/addStudent") @RequestMapping("/addStudent")
@ -122,9 +140,10 @@ public class StudentController {
/** /**
* 添加学生信息 * 添加学生信息
* @param student *
* @param response * @param student 学生对象
* @throws Exception * @param response HTTP响应对象
* @throws Exception 抛出异常
*/ */
@RequestMapping("/add") @RequestMapping("/add")
public void add(Student student, HttpServletResponse response) throws Exception { public void add(Student student, HttpServletResponse response) throws Exception {
@ -133,7 +152,6 @@ public class StudentController {
writer.write("false"); writer.write("false");
return; return;
} }
Student s = studentService.findBySno(student.getSno()); Student s = studentService.findBySno(student.getSno());
if (s != null) { if (s != null) {
writer.write("false"); writer.write("false");
@ -145,7 +163,6 @@ public class StudentController {
} else { } else {
writer.write("false"); writer.write("false");
} }
} }
@RequestMapping("/editStudent") @RequestMapping("/editStudent")
@ -158,11 +175,13 @@ public class StudentController {
mv.setViewName("student-edit"); mv.setViewName("student-edit");
return mv; return mv;
} }
/** /**
* 修改学生信息 * 修改学生信息
* @param student *
* @param response * @param student 学生对象
* @throws Exception * @param response HTTP响应对象
* @throws Exception 抛出异常
*/ */
@RequestMapping("/update") @RequestMapping("/update")
public void update(Student student, HttpServletResponse response) throws Exception { public void update(Student student, HttpServletResponse response) throws Exception {
@ -171,25 +190,18 @@ public class StudentController {
if (student == null || student.getId() == null) { if (student == null || student.getId() == null) {
return; return;
} }
if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 || student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex()) || student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0 || student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0 || student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0 || student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0 || student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0 || student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0) {
|| student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex())
|| student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0
|| student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0
|| student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0
|| student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0
|| student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0
|| student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0 ) {
return; return;
} }
studentService.update(student); studentService.update(student);
writer.write("true"); writer.write("true");
} }
/** /**
* 导出学生数据为Excel * 导出学生数据为Excel
* @param response *
* @throws Exception * @param response HTTP响应对象
* @throws Exception 抛出异常
*/ */
@RequestMapping("/export") @RequestMapping("/export")
public void export(HttpServletResponse response) throws Exception { public void export(HttpServletResponse response) throws Exception {
@ -200,6 +212,5 @@ public class StudentController {
IOUtils.copy(is, outputStream); IOUtils.copy(is, outputStream);
} }
}
} }

64
src/main/java/cn/ppdxzz/dao/StudentDao.java
Unescape View File

@ -7,88 +7,88 @@ import org.springframework.stereotype.Repository;
import java.util.List; import java.util.List;
/** /**
* Description:学生类的持久层 * Description:学生类的持久层接口，用于定义对学生信息进行数据库操作的方法
*
* @Date: 2020/2/17 14:19
* @Author: PeiChen
*/ */
@Repository @Repository
public interface StudentDao { public interface StudentDao {
/** /**
* 查询所有学生信息 * 查询所有学生信息
* @return * @return 返回包含所有学生信息的列表
* @throws Exception * @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students") @Select("select * from students")
List<Student> findAll() throws Exception; List<Student> findAll() throws Exception;
/** /**
* 通过学号sno查询学生信息 * 通过学号sno查询学生信息
* @return * @param sno 学生的学号
* @throws Exception * @return 返回对应学号的学生信息
* @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students where sno = #{sno}") @Select("select * from students where sno = #{sno}")
Student findBySno(String sno) throws Exception; Student findBySno(String sno) throws Exception;
/** /**
* 模糊查询学生信息 * 模糊查询学生信息
* @return * @param keyword 搜索关键字
* @throws Exception * @return 返回匹配关键字的学生信息列表
* @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students where name like '%${keyword}%' or sex like '%${keyword}%' or sno like '%${keyword}%' or stu_class like '%${keyword}%' or phone like '%${keyword}%' or place like '%${keyword}%' or dorm_id like '%${keyword}%' or teacher like '%${keyword}%' ") @Select("select * from students where name like '%${keyword}%' or sex like '%${keyword}%' or sno like '%${keyword}%' or stu_class like '%${keyword}%' or phone like '%${keyword}%' or place like '%${keyword}%' or dorm_id like '%${keyword}%' or teacher like '%${keyword}%' ")
List<Student> search(@Param(value = "keyword") String keyword) throws Exception; List<Student> search(@Param(value = "keyword") String keyword) throws Exception;
/** /**
* 添加学生信息 * 添加学生信息
* @param student * @param student 要添加的学生对象
* @throws Exception * @throws Exception 如果添加过程中发生错误则抛出异常
*/ */
@Insert("insert into students(name, sex, sno, stu_class, phone, place, dorm_id, teacher, status) values(#{name},#{sex},#{sno},#{stu_class},#{phone},#{place},#{dorm_id},#{teacher},#{status})") @Insert("insert into students(name, sex, sno, stu_class, phone, place, dorm_id, teacher, status) values(#{name},#{sex},#{sno},#{stu_class},#{phone},#{place},#{dorm_id},#{teacher},#{status})")
void add(Student student) throws Exception; void add(Student student) throws Exception;
/** /**
* 根据id删除学生 * 根据学号删除学生信息
* @param sno * @param sno 学生的学号
* @throws Exception * @throws Exception 如果删除过程中发生错误则抛出异常
*/ */
@Delete("delete from students where sno = #{sno}") @Delete("delete from students where sno = #{sno}")
void delete(String sno) throws Exception; void delete(String sno) throws Exception;
/** /**
* 根据id修改学生信息 * 根据学号修改学生信息
* @param student * @param student 更新后的学生对象
* @throws Exception * @throws Exception 如果更新过程中发生错误则抛出异常
*/ */
@Update("update students set name = #{name},sex = #{sex},sno = #{sno},stu_class = #{stu_class},phone = #{phone},place = #{place},dorm_id = #{dorm_id},teacher = #{teacher},status = #{status} where id = #{id}") @Update("update students set name = #{name},sex = #{sex},sno = #{sno},stu_class = #{stu_class},phone = #{phone},place = #{place},dorm_id = #{dorm_id},teacher = #{teacher},status = #{status} where id = #{id}")
void update(Student student) throws Exception; void update(Student student) throws Exception;
/** /**
* 根据宿舍号查询状态为status的宿舍学生 * 根据宿舍号和状态查询学生信息
* @param dorm_id * @param dorm_id 宿舍号
* @return * @param status 学生状态
* @throws Exception * @return 返回符合条件的学生信息列表
* @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students where dorm_id = #{dorm_id} and status = #{status}") @Select("select * from students where dorm_id = #{dorm_id} and status = #{status}")
List<Student> findByDormId(@Param(value = "dorm_id") String dorm_id,@Param(value = "status") Integer status) throws Exception; List<Student> findByDormId(@Param(value = "dorm_id") String dorm_id,@Param(value = "status") Integer status) throws Exception;
/** /**
* 查询育人导师为teacher的学生集合 * 查询指定育人导师所带的所有学生信息
* @param teacher * @param teacher 育人导师的名字
* @return * @return 返回该育人导师所带的学生信息列表
* @throws Exception * @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students where teacher = #{teacher}") @Select("select * from students where teacher = #{teacher}")
List<Student> findByTeacher(String teacher) throws Exception; List<Student> findByTeacher(String teacher) throws Exception;
/** /**
* 模糊查询固定育人导师所带学生信息 * 模糊查询固定育人导师所带的学生信息
* @param teacher * @param teacher 育人导师的名字
* @param keyword * @param keyword 搜索关键字
* @return * @return 返回匹配关键字的该育人导师所带的学生信息列表
* @throws Exception * @throws Exception 如果查询过程中发生错误则抛出异常
*/ */
@Select("select * from students where teacher = #{teacher} and sno = #{keyword} ") @Select("select * from students where teacher = #{teacher} and sno = #{keyword} ")
List<Student> searchStudent(@Param(value = "teacher") String teacher,@Param(value = "keyword") String keyword) throws Exception; List<Student> searchStudent(@Param(value = "teacher") String teacher,@Param(value = "keyword") String keyword) throws Exception;
} }

32
src/main/java/cn/ppdxzz/domain/Student.java
Unescape View File

@ -3,26 +3,26 @@ package cn.ppdxzz.domain;
import java.io.Serializable; import java.io.Serializable;
/** /**
* Description: * Student类表示一个学生对象，包含学生的基本信息和状态。
* * 该类实现了Serializable接口，允许其对象被序列化。
* @Date: 2020/2/17 14:08
* @Author: PeiChen
*/ */
public class Student implements Serializable { public class Student implements Serializable {
private Integer id; private Integer id; // 学生的唯一标识符
private String name;//姓名 private String name; // 学生的姓名
private String sex;//性别 private String sex; // 学生的性别
private String sno;//学号 private String sno; // 学生的学号
private String stu_class;//班级 private String stu_class; // 学生所在的班级
private String phone;//联系方式 private String phone; // 学生的联系电话
private String place;//家庭住址 private String place; // 学生的家庭住址
private String dorm_id;//宿舍号 private String dorm_id; // 学生宿舍的编号
private String teacher;//育人导师 private String teacher; // 负责学生育人导师的名字
private Integer status;//学生状态是否激活：1 激活 0 禁用 private Integer status; // 学生的状态：1表示激活，0表示禁用
// 无参构造函数
public Student() { public Student() {
} }
// 全参构造函数，用于创建具有所有属性的学生对象
public Student(Integer id, String name, String sex, String sno, String stu_class, String phone, String place, String dorm_id, String teacher, Integer status) { public Student(Integer id, String name, String sex, String sno, String stu_class, String phone, String place, String dorm_id, String teacher, Integer status) {
this.id = id; this.id = id;
this.name = name; this.name = name;
@ -36,6 +36,7 @@ public class Student implements Serializable {
this.status = status; this.status = status;
} }
// Getter和Setter方法用于访问和修改私有属性
public Integer getId() { public Integer getId() {
return id; return id;
} }
@ -116,6 +117,7 @@ public class Student implements Serializable {
this.status = status; this.status = status;
} }
// toString方法用于返回对象的字符串表示形式，便于调试和日志记录
@Override @Override
public String toString() { public String toString() {
return "Student{" + return "Student{" +

93
src/main/java/cn/ppdxzz/service/StudentService.java
Unescape View File

@ -6,31 +6,92 @@ import java.io.InputStream;
import java.util.List; import java.util.List;
/** /**
* Description:学生业务层 * Description:学生业务层接口，定义了对学生信息进行操作的方法
*
* @Date: 2020/2/17 14:21
* @Author: PeiChen
*/ */
public interface StudentService { public interface StudentService {
/**
* 分页查询所有学生信息
* @param page 当前页码
* @param size 每页显示的记录数
* @return 返回学生列表
* @throws Exception 如果查询过程中发生错误
*/
List<Student> findAll(int page, int size) throws Exception; // 定义分页查询所有学生信息的方法
List<Student> findAll(int page,int size) throws Exception; /**
* 根据学号查询学生信息
Student findBySno(String sno) throws Exception; * @param sno 学生的学号
* @return 返回对应的学生对象
* @throws Exception 如果查询过程中发生错误
*/
Student findBySno(String sno) throws Exception; // 定义根据学号查询学生信息的方法
List<Student> search(int page, int size, String keyword) throws Exception; /**
* 分页搜索学生信息
* @param page 当前页码
* @param size 每页显示的记录数
* @param keyword 搜索关键字
* @return 返回符合条件的学生列表
* @throws Exception 如果搜索过程中发生错误
*/
List<Student> search(int page, int size, String keyword) throws Exception; // 定义分页搜索学生信息的方法
boolean add(Student student) throws Exception; /**
* 添加新的学生信息
* @param student 要添加的学生对象
* @return 成功添加返回true，否则返回false
* @throws Exception 如果添加过程中发生错误
*/
boolean add(Student student) throws Exception; // 定义添加新学生信息的方法
void delete(String sno) throws Exception; /**
* 根据学号删除学生信息
* @param sno 学生的学号
* @throws Exception 如果删除过程中发生错误
*/
void delete(String sno) throws Exception; // 定义根据学号删除学生信息的方法
void update(Student student) throws Exception; /**
* 更新学生信息
* @param student 要更新的学生对象
* @throws Exception 如果更新过程中发生错误
*/
void update(Student student) throws Exception; // 定义更新学生信息的方法
//返回一个携带所有学生信息数据的InputStream输入流 /**
InputStream getInputStream() throws Exception; * 获取包含所有学生信息的输入流
* @return 返回一个携带所有学生信息数据的InputStream输入流
* @throws Exception 如果获取过程中发生错误
*/
InputStream getInputStream() throws Exception; // 定义获取所有学生信息输入流的方法
List<Student> findByDormId(String dorm_id,Integer status) throws Exception; /**
* 根据宿舍ID和状态查询学生信息
* @param dorm_id 宿舍ID
* @param status 学生状态（激活或禁用）
* @return 返回符合条件的学生列表
* @throws Exception 如果查询过程中发生错误
*/
List<Student> findByDormId(String dorm_id, Integer status) throws Exception; // 定义根据宿舍ID和状态查询学生信息的方法
List<Student> findByTeacher(int page,int size,String teacher) throws Exception; /**
* 根据教师姓名分页查询学生信息
* @param page 当前页码
* @param size 每页显示的记录数
* @param teacher 教师姓名
* @return 返回符合条件的学生列表
* @throws Exception 如果查询过程中发生错误
*/
List<Student> findByTeacher(int page, int size, String teacher) throws Exception; // 定义根据教师姓名分页查询学生信息的方法
List<Student> searchStudent(int page,int size,String teacher,String keyword) throws Exception; /**
* 根据教师姓名和搜索关键字分页查询学生信息
* @param page 当前页码
* @param size 每页显示的记录数
* @param teacher 教师姓名
* @param keyword 搜索关键字
* @return 返回符合条件的学生列表
* @throws Exception 如果查询过程中发生错误
*/
List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception; // 定义根据教师姓名和搜索关键字分页查询学生信息的方法
} }

84
src/main/java/cn/ppdxzz/service/impl/StudentServiceImpl.java
Unescape View File

@ -13,10 +13,7 @@ import java.util.ArrayList;
import java.util.List; import java.util.List;
/** /**
* Description: * StudentServiceImpl类实现了StudentService接口，提供学生信息的管理功能。
*
* @Date: 2020/2/17 14:22
* @Author: PeiChen
*/ */
@Service("studentService") @Service("studentService")
public class StudentServiceImpl implements StudentService { public class StudentServiceImpl implements StudentService {
@ -29,9 +26,11 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 查询所有学生信息 * 查询所有学生信息，支持分页。
* @return * @param page 当前页码
* @throws Exception * @param size 每页显示的记录数
* @return 学生列表
* @throws Exception 异常处理
*/ */
@Override @Override
public List<Student> findAll(int page, int size) throws Exception { public List<Student> findAll(int page, int size) throws Exception {
@ -40,9 +39,10 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 通过学号sno查询学生信息 * 根据学号查询学生信息。
* @return * @param sno 学号
* @throws Exception * @return 学生对象
* @throws Exception 异常处理
*/ */
@Override @Override
public Student findBySno(String sno) throws Exception { public Student findBySno(String sno) throws Exception {
@ -50,9 +50,12 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 模糊查询学生信息 * 模糊查询学生信息，支持分页。
* @return * @param page 当前页码
* @throws Exception * @param size 每页显示的记录数
* @param keyword 查询关键字
* @return 学生列表
* @throws Exception 异常处理
*/ */
@Override @Override
public List<Student> search(int page, int size, String keyword) throws Exception { public List<Student> search(int page, int size, String keyword) throws Exception {
@ -61,9 +64,10 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 添加学生信息 * 添加学生信息。
* @param student * @param student 学生对象
* @throws Exception * @return 是否添加成功
* @throws Exception 异常处理
*/ */
@Override @Override
public boolean add(Student student) throws Exception { public boolean add(Student student) throws Exception {
@ -77,9 +81,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 根据学号删除学生 * 根据学号删除学生信息。
* @param sno * @param sno 学号
* @throws Exception * @throws Exception 异常处理
*/ */
@Override @Override
public void delete(String sno) throws Exception { public void delete(String sno) throws Exception {
@ -87,9 +91,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 修改学生信息 * 修改学生信息。
* @param student * @param student 学生对象
* @throws Exception * @throws Exception 异常处理
*/ */
@Override @Override
public void update(Student student) throws Exception { public void update(Student student) throws Exception {
@ -97,9 +101,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 导出学生信息 * 导出学生信息到Excel文件。
* @return * @return 输入流，用于读取生成的Excel文件
* @throws Exception * @throws Exception 异常处理
*/ */
@Override @Override
public InputStream getInputStream() throws Exception { public InputStream getInputStream() throws Exception {
@ -121,16 +125,15 @@ public class StudentServiceImpl implements StudentService {
datalist.add(obj); datalist.add(obj);
} }
WriteExcel excel = new WriteExcel(title, datalist); WriteExcel excel = new WriteExcel(title, datalist);
return excel.export(); return excel.export();
} }
/** /**
* 根据宿舍号查询状态为status的学生 * 根据宿舍号查询状态为status的学生。
* @param dorm_id * @param dorm_id 宿舍号
* @param status * @param status 状态值
* @return * @return 学生列表
* @throws Exception * @throws Exception 异常处理
*/ */
@Override @Override
public List<Student> findByDormId(String dorm_id, Integer status) throws Exception { public List<Student> findByDormId(String dorm_id, Integer status) throws Exception {
@ -138,10 +141,12 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* 查询育人导师为teacher的学生集合 * 查询育人导师为teacher的学生集合，支持分页。
* @param teacher * @param page 当前页码
* @return * @param size 每页显示的记录数
* @throws Exception * @param teacher 育人导师名称
* @return 学生列表
* @throws Exception 异常处理
*/ */
@Override @Override
public List<Student> findByTeacher(int page, int size, String teacher) throws Exception { public List<Student> findByTeacher(int page, int size, String teacher) throws Exception {
@ -149,6 +154,15 @@ public class StudentServiceImpl implements StudentService {
return studentDao.findByTeacher(teacher); return studentDao.findByTeacher(teacher);
} }
/**
* 根据育人导师和关键字模糊查询学生信息，支持分页。
* @param page 当前页码
* @param size 每页显示的记录数
* @param teacher 育人导师名称
* @param keyword 查询关键字
* @return 学生列表
* @throws Exception 异常处理
*/
@Override @Override
public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception { public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception {
PageHelper.startPage(page, size); PageHelper.startPage(page, size);

117
src/main/webapp/WEB-INF/jsp/student-add.jsp
Unescape View File

@ -1,33 +1,19 @@
<%--
Created by IntelliJ IDEA.
User: user
Date: 2020/2/17
Time: 12:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html> <html>
<head> <head>
<title>Title</title> <title>Title</title>
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
</head> </head>
<body> <body>
<form> <form>
<!-- 创建一个表格，用于输入学生信息 -->
<table class="table" style="width: 100%;text-align: center;"> <table class="table" style="width: 100%;text-align: center;">
<tbody> <tbody>
<tr> <tr>
<td> <td><label for="name">姓名</label></td>
<label for="name">姓名</label> <td><input type="text" class="form-control" id="name" name="name" maxlength="10" required></td>
</td> <td><label for="sex">性别</label></td>
<td>
<input type="text" class="form-control" id="name" name="name" maxlength="10" required>
</td>
<td>
<label for="sex">性别</label>
</td>
<td> <td>
<select class="form-control" name="sex" id="sex"> <select class="form-control" name="sex" id="sex">
<option value="男" selected>男</option> <option value="男" selected>男</option>
@ -36,28 +22,16 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td><label for="sno">学号</label></td>
<label for="sno">学号</label> <td><input type="text" name="sno" class="form-control" id="sno" aria-describedby="textHelp" maxlength="20" required></td>
</td> <td><label for="stu_class">班级</label></td>
<td> <td><input type="text" name="stu_class" class="form-control" id="stu_class" maxlength="30" required></td>
<input type="text" name="sno" class="form-control" id="sno" aria-describedby="textHelp" maxlength="20" required>
</td>
<td>
<label for="stu_class">班级</label>
</td>
<td>
<input type="text" name="stu_class" class="form-control" id="stu_class" maxlength="30" required>
</td>
</tr> </tr>
<tr> <tr>
<td><label for="phone">联系方式</label></td> <td><label for="phone">联系方式</label></td>
<td> <td><input type="text" name="phone" class="form-control" id="phone" minlength="11" maxlength="11" required></td>
<input type="text" name="phone" class="form-control" id="phone" minlength="11" maxlength="11" required>
</td>
<td><label for="place">家庭住址</label></td> <td><label for="place">家庭住址</label></td>
<td> <td><input type="text" placeholder="请输入家庭详细地址" name="place" class="form-control" id="place" maxlength="30" required></td>
<input type="text" placeholder="请输入家庭详细地址" name="place" class="form-control" id="place" maxlength="30" required>
</td>
</tr> </tr>
<tr> <tr>
<td><label for="dorm1">宿舍号</label></td> <td><label for="dorm1">宿舍号</label></td>
@ -73,49 +47,46 @@
<option value="A" selected>A</option> <option value="A" selected>A</option>
<option value="B">B</option> <option value="B">B</option>
</select></td> </select></td>
<td> <td><input type="text" name="dorm3" placeholder="请直接输入宿舍号" maxlength="3" class="form-control" id="dorm3" required></td>
<input type="text" name="dorm3" placeholder="请直接输入宿舍号" maxlength="3" class="form-control" id="dorm3" required>
</td>
</tr> </tr>
<tr> <tr>
<td><label for="teacher">育人导师</label></td> <td><label for="teacher">育人导师</label></td>
<td> <td><select class="form-control" name="teacher" id="teacher">
<select class="form-control" name="teacher" id="teacher">
<option value="小李" selected>小李</option> <option value="小李" selected>小李</option>
<option value="小王">小王</option> <option value="小王">小王</option>
<option value="小赵">小赵</option> <option value="小赵">小赵</option>
<option value="小飞">小飞</option> <option value="小飞">小飞</option>
<option value="小张">小张</option> <option value="小张">小张</option>
</select> </select></td>
</td>
<td><label for="status">状态</label></td> <td><label for="status">状态</label></td>
<td> <td><select class="form-control" name="status" id="status">
<select class="form-control" name="status" id="status">
<option value="0" selected>禁用</option> <option value="0" selected>禁用</option>
<option value="1">激活</option> <option value="1">激活</option>
</select> </select></td>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="4">
<!-- 确认添加按钮 -->
<button type="button" id="add-student" class="btn btn-primary">确认添加</button> <button type="button" id="add-student" class="btn btn-primary">确认添加</button>
<a href="javascript:window.history.back(-1)" target="_self" class="btn btn-default">返回列表</a> <!-- 返回列表链接 -->
<a href="window.history.back(-1)" target="_self" class="btn btn-default">返回列表</a>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</form> </form>
<!-- jQuery脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> <script>
$(function () { $(function () {
// ajax校验学号已被注册 // ajax校验学号已被注册
$("#sno").change(function () { $("#sno").change(function () {
//取sno的值 var sno = $(this).val(); // 获取学号的值
var sno = $(this).val();
//ajax异步请求
$.get("${pageContext.request.contextPath}/student/isExist",{"sno":sno},function (date) { $.get("${pageContext.request.contextPath}/student/isExist",{"sno":sno},function (date) {
//$(".error").html(msg);
if (date) { if (date) {
layer.msg('学号已被注册，请重新输入！'); layer.msg('学号已被注册，请重新输入！'); // 提示学号已被注册
return false; return false;
} }
}); });
@ -133,21 +104,18 @@
var status = $("#status").val().trim(); var status = $("#status").val().trim();
if (name == 0 || sex == 0 || sno == 0 || stu_class == 0 || phone == 0 || place == 0 || dorm3 == 0 || teacher == 0) { if (name == 0 || sex == 0 || sno == 0 || stu_class == 0 || phone == 0 || place == 0 || dorm3 == 0 || teacher == 0) {
layer.msg('字段不能为空'); layer.msg('字段不能为空'); // 提示字段不能为空
return false; return false;
} }
if (${sessionScope.adminInfo.power < 1}) { if (${sessionScope.adminInfo.power < 1}) {
layer.msg('对不起，您权限不足'); layer.msg('对不起，您权限不足'); // 提示权限不足
return false; return false;
} }
var d1 = $("#dorm1").val(); var d1 = $("#dorm1").val();
var d2 = $("#dorm2").val(); var d2 = $("#dorm2").val();
var dorm_id = d1+""+d2+""+dorm3; var dorm_id = d1+""+d2+""+dorm3; // 拼接宿舍ID
//alert(dorm_id);
$.ajax({ $.ajax({
url: "${pageContext.request.contextPath}/student/add",//要请求的服务器url url: "${pageContext.request.contextPath}/student/add", // 请求的URL
//这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取
//data:{method:"ajaxTest",val:value},
data: { data: {
name:name, name:name,
sex:sex, sex:sex,
@ -160,32 +128,33 @@
status:status status:status
}, },
type: "POST", // 请求方式为POST type: "POST", // 请求方式为POST
dataType: "json", dataType: "json", // 数据类型为JSON
success:function(result){ //这个方法会在服务器执行成功时被调用 ，参数data就是服务器返回的值(现在是json类型) success:function(result){ // 成功回调函数
//alert(result);
if(result){ if(result){
layer.msg('添加成功！'); layer.msg('添加成功！'); // 提示添加成功
if (${sessionScope.adminInfo.power == 1}) { if (${sessionScope.adminInfo.power == 1}) {
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';},2000); // 跳转到宿舍管理员页面
return false; return false;
} }
if (${sessionScope.adminInfo.power == 2}) { if (${sessionScope.adminInfo.power == 2}) {
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';},2000); // 跳转到学生查询页面
return flase; return false;
} }
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
}else { }else {
layer.msg('添加失败，请联系管理员'); layer.msg('添加失败，请联系管理员'); // 如果操作失败，显示错误消息
if (${sessionScope.adminInfo.power == 1}) { if (${sessionScope.adminInfo.power == 1}) { // 根据用户权限不同，跳转到不同的页面
// 宿舍管理员权限，2秒后跳转到宿舍管理员页面
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
return false; return false;
} }
if (${sessionScope.adminInfo.power == 2}) { if (${sessionScope.adminInfo.power == 2}) { // 学生权限，2秒后跳转到学生查询页面
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
return flase; return false; //
}
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
} }
// 默认情况下，2秒后跳转到学生列表页面
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);}
} }
}); });
}); });

26
src/main/webapp/WEB-INF/jsp/student-edit.jsp
Unescape View File

@ -1,11 +1,4 @@
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: user
Date: 2020/2/17
Time: 12:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html> <html>
<head> <head>
@ -171,36 +164,37 @@
status: status status: status
}, },
type: "POST", // 请求方式为POST type: "POST", // 请求方式为POST
dataType: "json", dataType: "json", // 期望从服务器接收的数据类型为JSON
success:function(result){ //这个方法会在服务器执行成功时被调用 ，参数data就是服务器返回的值(现在是json类型) success: function(result) { // 成功回调函数，参数result是服务器返回的数据
//alert(result);
if (result) { if (result) {
layer.msg('修改成功'); layer.msg('修改成功'); // 显示修改成功的提示消息
// 根据用户权限重定向到不同的页面
if (${sessionScope.adminInfo.power == 1}) { if (${sessionScope.adminInfo.power == 1}) {
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
return false; return false;
} }
if (${sessionScope.adminInfo.power == 2}) { if (${sessionScope.adminInfo.power == 2}) {
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
return flase; return false; // 注意这里应该是 return false; 而不是 return flase;
} }
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);
} else { } else {
layer.msg('修改失败，请联系管理员'); layer.msg('修改失败，请联系管理员'); // 显示修改失败的提示消息
// 根据用户权限重定向到不同的页面
if (${sessionScope.adminInfo.power == 1}) { if (${sessionScope.adminInfo.power == 1}) {
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
return false; return false;
} }
if (${sessionScope.adminInfo.power == 2}) { if (${sessionScope.adminInfo.power == 2}) {
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
return flase; return false; // 注意这里应该是 return false; 而不是 return flase;
}
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
} }
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);}
} }
}); });
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

106
src/main/webapp/WEB-INF/jsp/student-list.jsp
Unescape View File

@ -1,10 +1,3 @@
<%--
Created by IntelliJ IDEA.
User: user
Date: 2020/2/10
Time: 21:45
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html class="x-admin-sm"> <html class="x-admin-sm">
@ -13,36 +6,37 @@
<title></title> <title></title>
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<script>
<script type="text/javascript">
// 定义一个函数用于改变每页显示条数
function changePageSize() { function changePageSize() {
// 获取下拉框的值 // 获取下拉框的值
var pageSize = $("#changePageSize").val(); var pageSize = $("#changePageSize").val();
// 向服务器发送请求，改变每页显示条数 // 向服务器发送请求，改变每页显示条数
location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=" + pageSize; location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=" + pageSize;
} }
// 绑定搜索按钮点击事件
$("#serarch_btn").click(function () { $("#serarch_btn").click(function () {
var keyword = $("#keyword").val(); var keyword = $("#keyword").val(); // 获取输入框中的关键字
location.href="${pageContext.request.contextPath}/student/findAll?page=1&size=5&keyword="+keyword; location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=5&keyword=" + keyword; // 向服务器发送请求，根据关键字搜索
}); });
// 绑定刷新按钮点击事件
$("#refresh").click(function () { $("#refresh").click(function () {
$("#myform").reset(); $("#myform").reset(); // 重置表单
location.href="${pageContext.request.contextPath}/student/findAll?page=1&size=5"; location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=5"; // 重新加载页面
}); });
</script> </script>
</head> </head>
<body> <body>
<%-- 导航栏部分被注释掉了 --%>
<%--<div class="x-nav"> <%--<div class="x-nav">
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">
<a href="">首页</a> <a href="">首页</a>
@ -50,7 +44,7 @@
<a> <a>
<cite>导航元素</cite></a> <cite>导航元素</cite></a>
</span> </span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" "location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a> <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>--%> </div>--%>
<div class="layui-fluid"> <div class="layui-fluid">
@ -58,6 +52,7 @@
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body "> <div class="layui-card-body ">
<!-- 搜索表单 -->
<form id="myform" class="layui-form layui-col-space5"> <form id="myform" class="layui-form layui-col-space5">
<div class="layui-inline layui-show-xs-block"> <div class="layui-inline layui-show-xs-block">
<input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}"> <input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
@ -66,16 +61,20 @@
<button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button> <button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
</div> </div>
<div class="layui-inline layui-show-xs-block x-right"> <div class="layui-inline layui-show-xs-block x-right">
<a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/student/findAll?page=1&size=5"><i class="layui-icon">&#xe669;</i></a> <a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/student/findAll?page=1&size=5"><i class="layui-icon">&#xe669;</i>全部</a>
</div> </div>
</form> </form>
</div> </div>
<xblock> <xblock>
<!-- 添加学生按钮 -->
<a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a> <a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a>
<a onclick="exportInfo()" class="layui-btn layui-btn-warm" href="javascript:;"><i class="layui-icon">&#xe67c;</i>导出</a> <!-- 导出信息按钮（功能未实现） -->
<a "exportInfo()" class="layui-btn layui-btn-warm" href=";"><i class="layui-icon">&#xe67c;</i>导出</a>
<!-- 显示数据总数 -->
<span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span> <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
</xblock> </xblock>
<div class="layui-card-body"> <div class="layui-card-body">
<!-- 表格展示学生信息 -->
<table class="layui-table layui-form"> <table class="layui-table layui-form">
<thead> <thead>
<tr style="text-align: center"> <tr style="text-align: center">
@ -94,38 +93,45 @@
</thead> </thead>
<tbody> <tbody>
<% <%
int j = 1; int j = 1; // 初始化行号计数器
%> %>
<!-- 遍历学生列表并生成表格行 -->
<c:forEach items="${pageInfo.list}" var="student"> <c:forEach items="${pageInfo.list}" var="student">
<tr id="light" style="text-align: center"> <tr id="light" style="text-align: center">
<td><%=j++%></td> <td><%=j++%></td> <!-- 显示行号 -->
<td>${student.name}</td> <td>${student.name}</td> <!-- 显示学生姓名 -->
<td>${student.sex}</td> <td>${student.sex}</td> <!-- 显示学生性别 -->
<td>${student.sno}</td> <td>${student.sno}</td> <!-- 显示学生学号 -->
<td>${student.stu_class}</td> <td>${student.stu_class}</td> <!-- 显示学生班级 -->
<td>${student.phone}</td> <td>${student.phone}</td> <!-- 显示学生联系方式 -->
<td>${student.dorm_id}</td> <td>${student.dorm_id}</td> <!-- 显示学生宿舍号 -->
<td>${student.teacher}</td> <td>${student.teacher}</td> <!-- 显示学生育人导师 -->
<c:if test="${student.status == 1}"> <c:if test="${student.status == 1}">
<!-- 显示已激活状态 -->
<td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td> <td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td>
</c:if> </c:if>
<c:if test="${student.status == 0}"> <c:if test="${student.status == 0}">
<!-- 显示禁用状态 -->
<td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td> <td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td>
</c:if> </c:if>
<c:if test="${sessionScope.adminInfo.power > 1}"> <c:if test="${sessionScope.adminInfo.power > 1}">
<td class="td-manage"> <td class="td-manage">
<!-- 编辑按钮 -->
<a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}"> <a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}">
<i class="layui-icon">&#xe642;</i> <i class="layui-icon">&#xe642;</i>
</a> </a>
<a title="删除" onclick="member_del(this,${student.sno},${sessionScope.adminInfo.power})" href="javascript:;"> <!-- 删除按钮（功能未实现） -->
<a title="删除" href=";" onclick="member_del(this,${student.sno},${sessionScope.adminInfo.power})">
<i class="layui-icon">&#xe640;</i> <i class="layui-icon">&#xe640;</i>
</a> </a>
</td> </td>
</c:if> </c:if>
</c:forEach>
</tr> </tr>
</c:forEach>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="pull-left"> <div class="pull-left">
<div class="form-group form-inline"> <div class="form-group form-inline">
@ -139,32 +145,28 @@
</select> 条 </select> 条
</div> </div>
</div> </div>
// 根据总页数和当前页码，动态设置分页导航的起始和结束页码
<c:choose> <c:choose>
<c:when test="${pageInfo.pages < 5}"> <c:when test="${pageInfo.pages < 5}">
<c:set var="begin" value="1"> <c:set var="begin" value="1"/>
</c:set> <c:set var="end" value="${pageInfo.pages}"/>
<c:set var="end" value="${pageInfo.pages}">
</c:set>
</c:when> </c:when>
<c:when test="${pageInfo.pageNum <= 3}"> <c:when test="${pageInfo.pageNum <= 3}">
<c:set var="begin" value="1"> <c:set var="begin" value="1"/>
</c:set> <c:set var="end" value="5"/>
<c:set var="end" value="5">
</c:set>
</c:when> </c:when>
<c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}"> <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
<c:set var="begin" value="${pageInfo.pageNum - 2}"> <c:set var="begin" value="${pageInfo.pageNum - 2}"/>
</c:set> <c:set var="end" value="${pageInfo.pageNum + 2}"/>
<c:set var="end" value="${pageInfo.pageNum + 2}">
</c:set>
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<c:set var="begin" value="${pageInfo.pages - 4}"> <c:set var="begin" value="${pageInfo.pages - 4}"/>
</c:set> <c:set var="end" value="${pageInfo.pages}"/>
<c:set var="end" value="${pageInfo.pages}">
</c:set>
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
// 分页导航按钮部分
<div class="layui-card-body x-right" style="height: min-content"> <div class="layui-card-body x-right" style="height: min-content">
<div class="page"> <div class="page">
<div> <div>
@ -183,8 +185,7 @@
<c:if test="${pageInfo.pageNum < pageInfo.pages}"> <c:if test="${pageInfo.pageNum < pageInfo.pages}">
<a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a> <a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
</c:if> </c:if>
<a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a> <a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -224,6 +225,7 @@
layer.close(index); layer.close(index);
}); });
} }
</script> </script>
</body> </body>
</html> </html>

100
src/main/webapp/WEB-INF/jsp/studentsTeacher.jsp
Unescape View File

@ -1,10 +1,3 @@
<%--
Created by IntelliJ IDEA.
User: user
Date: 2020/2/10
Time: 21:45
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html class="x-admin-sm"> <html class="x-admin-sm">
@ -13,21 +6,16 @@
<title></title> <title></title>
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<%-- 注释掉的导航栏代码 --%>
<%--<div class="x-nav"> <%--<div class="x-nav">
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">
<a href="">首页</a> <a href="">首页</a>
@ -35,14 +23,16 @@
<a> <a>
<cite>导航元素</cite></a> <cite>导航元素</cite></a>
</span> </span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" "location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a> <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>--%> </div>--%>
<div class="layui-fluid"> <div class="layui-fluid">
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body "> <div class="layui-card-body ">
<!-- 注释掉的搜索表单代码 -->
<%--<form id="myform" class="layui-form layui-col-space5"> <%--<form id="myform" class="layui-form layui-col-space5">
<div class="layui-inline layui-show-xs-block"> <div class="layui-inline layui-show-xs-block">
<input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}"> <input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
@ -56,10 +46,13 @@
</form>--%> </form>--%>
</div> </div>
<xblock> <xblock>
<!-- 添加学生按钮 -->
<a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a> <a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a>
<!-- 显示总数据条数 -->
<span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span> <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
</xblock> </xblock>
<div class="layui-card-body"> <div class="layui-card-body">
<!-- 表格展示学生信息 -->
<table class="layui-table layui-form"> <table class="layui-table layui-form">
<thead> <thead>
<tr style="text-align: center"> <tr style="text-align: center">
@ -73,40 +66,47 @@
<th style="text-align: center">育人导师</th> <th style="text-align: center">育人导师</th>
<th style="text-align: center">状态</th> <th style="text-align: center">状态</th>
<th style="text-align: center">操作</th> <th style="text-align: center">操作</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<% <%
int j = 1; int j = 1; // 初始化行号计数器
%> %>
<!-- 遍历学生列表并生成表格行 -->
<c:forEach items="${pageInfo.list}" var="student"> <c:forEach items="${pageInfo.list}" var="student">
<tr id="light" style="text-align: center"> <tr id="light" style="text-align: center">
<td><%=j++%></td> <td><%=j++%></td> <!-- 显示行号 -->
<td>${student.name}</td> <td>${student.name}</td> <!-- 显示学生姓名 -->
<td>${student.sex}</td> <td>${student.sex}</td> <!-- 显示学生性别 -->
<td>${student.sno}</td> <td>${student.sno}</td> <!-- 显示学生学号 -->
<td>${student.stu_class}</td> <td>${student.stu_class}</td> <!-- 显示学生班级 -->
<td>${student.phone}</td> <td>${student.phone}</td> <!-- 显示学生联系方式 -->
<td>${student.dorm_id}</td> <td>${student.dorm_id}</td> <!-- 显示学生宿舍号 -->
<td>${student.teacher}</td> <td>${student.teacher}</td> <!-- 显示学生育人导师 -->
<!-- 根据学生状态显示不同按钮 -->
<c:if test="${student.status == 1}"> <c:if test="${student.status == 1}">
<td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td> <td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td>
</c:if> </c:if>
<c:if test="${student.status == 0}"> <c:if test="${student.status == 0}">
<td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td> <td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td>
</c:if> </c:if>
<!-- 编辑按钮 -->
<td class="td-manage"> <td class="td-manage">
<a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}"> <a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}">
<i class="layui-icon">&#xe642;</i> <i class="layui-icon">&#xe642;</i>
</a> </a>
</td> </td>
</tr>
</c:forEach> </c:forEach>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="pull-left"> <div class="pull-left">
<!-- 左侧浮动的分页信息 -->
<div class="form-group form-inline"> <div class="form-group form-inline">
共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页 共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页
<!-- 下拉框用于选择每页显示的条数 -->
<select class="form-control" id="changePageSize" onchange="changePageSize()"> <select class="form-control" id="changePageSize" onchange="changePageSize()">
<option value="1">${pageInfo.size}</option> <option value="1">${pageInfo.size}</option>
<option value="5">5</option> <option value="5">5</option>
@ -116,50 +116,58 @@
</select> 条 </select> 条
</div> </div>
</div> </div>
<c:choose> <c:choose>
<!-- 根据总页数和当前页码设置分页按钮的范围 -->
<c:when test="${pageInfo.pages < 5}"> <c:when test="${pageInfo.pages < 5}">
<c:set var="begin" value="1"> <!-- 如果总页数小于5，则显示所有页码 -->
</c:set> <c:set var="begin" value="1"></c:set>
<c:set var="end" value="${pageInfo.pages}"> <c:set var="end" value="${pageInfo.pages}"></c:set>
</c:set>
</c:when> </c:when>
<c:when test="${pageInfo.pageNum <= 3}"> <c:when test="${pageInfo.pageNum <= 3}">
<c:set var="begin" value="1"> <!-- 如果当前页码小于等于3，则显示前5页 -->
</c:set> <c:set var="begin" value="1"></c:set>
<c:set var="end" value="5"> <c:set var="end" value="5"></c:set>
</c:set>
</c:when> </c:when>
<c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}"> <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
<c:set var="begin" value="${pageInfo.pageNum - 2}"> <!-- 如果当前页码大于3且小于总页数减2，则显示当前页码前后各两页 -->
</c:set> <c:set var="begin" value="${pageInfo.pageNum - 2}"></c:set>
<c:set var="end" value="${pageInfo.pageNum + 2}"> <c:set var="end" value="${pageInfo.pageNum + 2}"></c:set>
</c:set>
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<c:set var="begin" value="${pageInfo.pages - 4}"> <!-- 其他情况，显示最后4页 -->
</c:set> <c:set var="begin" value="${pageInfo.pages - 4}"></c:set>
<c:set var="end" value="${pageInfo.pages}"> <c:set var="end" value="${pageInfo.pages}"></c:set>
</c:set>
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
<div class="layui-card-body x-right" style="height: min-content"> <div class="layui-card-body x-right" style="height: min-content">
<!-- 右侧浮动的分页导航 -->
<div class="page"> <div class="page">
<div> <div>
<!-- 首页链接 -->
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a> <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a>
<!-- 上一页链接，如果当前页码大于1 -->
<c:if test="${pageInfo.pageNum > 1}"> <c:if test="${pageInfo.pageNum > 1}">
<a class="prev" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a> <a class="prev" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a>
</c:if> </c:if>
<!-- 循环生成页码链接 -->
<c:forEach var="i" begin="${begin}" end="${end}" step="1"> <c:forEach var="i" begin="${begin}" end="${end}" step="1">
<!-- 当前页码高亮显示 -->
<c:if test="${pageInfo.pageNum == i}"> <c:if test="${pageInfo.pageNum == i}">
<span class="current">${i}</span> <span class="current">${i}</span>
</c:if> </c:if>
<!-- 非当前页码的普通链接 -->
<c:if test="${pageInfo.pageNum != i}"> <c:if test="${pageInfo.pageNum != i}">
<a class="num" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${i}&size=${pageInfo.pageSize}&keyword=${param.keyword}">${i}</a> <a class="num" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${i}&size=${pageInfo.pageSize}&keyword=${param.keyword}">${i}</a>
</c:if> </c:if>
</c:forEach> </c:forEach>
<!-- 下一页链接，如果当前页码小于总页数 -->
<c:if test="${pageInfo.pageNum < pageInfo.pages}"> <c:if test="${pageInfo.pageNum < pageInfo.pages}">
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a> <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
</c:if> </c:if>
<!-- 尾页链接 -->
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a> <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
</div> </div>
</div> </div>
@ -168,6 +176,8 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function changePageSize() { function changePageSize() {
// 获取下拉框的值 // 获取下拉框的值
@ -175,14 +185,16 @@
// 向服务器发送请求，改变每页显示条数 // 向服务器发送请求，改变每页显示条数
location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=" + pageSize; location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=" + pageSize;
} }
$("#search_btn").click(function () { $("#search_btn").click(function () {
alert(1234); // 获取搜索关键字
var keyword = $("#keyword").val(); var keyword = $("#keyword").val();
alert(keyword); // 向服务器发送请求，进行搜索
alert("${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5&keyword="+keyword);
location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5&keyword=" + keyword; location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5&keyword=" + keyword;
}); });
$("#refresh").click(function () { $("#refresh").click(function () {
// 重置表单并刷新页面
$("#myform").reset(); $("#myform").reset();
location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5"; location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5";
}); });

279
src/main/webapp/css/mobileSelect.css
Unescape View File

@ -1,150 +1,193 @@
/* 定义一个名为 mobileSelect 的类，用于设置选择器的样式 */
.mobileSelect { .mobileSelect {
position: relative; position: relative; /* 相对定位 */
z-index: 0; z-index: 0; /* 层级为0 */
opacity: 0; opacity: 0; /* 初始透明度为0，即不可见 */
visibility: hidden; visibility: hidden; /* 初始状态为隐藏 */
-webkit-transition: opacity 0.4s, z-index 0.4s; -webkit-transition: opacity 0.4s, z-index 0.4s; /* 过渡效果：透明度和层级变化持续0.4秒 */
transition: opacity 0.4s, z-index 0.4s; transition: opacity 0.4s, z-index 0.4s; /* 标准过渡效果 */
} }
/* 设置 mobileSelect 内所有元素的边距和填充为0，并使用盒模型计算方式 */
.mobileSelect * { .mobileSelect * {
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* 定义 mobileSelect 内的 grayLayer 类的样式 */
.mobileSelect .grayLayer { .mobileSelect .grayLayer {
position: fixed; position: fixed; /* 固定定位 */
top: 0; top: 0; /* 距离顶部0 */
left: 0; left: 0; /* 距离左侧0 */
bottom: 0; bottom: 0; /* 距离底部0 */
right: 0; right: 0; /* 距离右侧0 */
background: #eee; background: #eee; /* 背景色 */
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
z-index: 888; z-index: 888; /* 层级为888 */
display: block; display: block; /* 显示为块级元素 */
} }
/* 定义 mobileSelect 内的 content 类的样式 */
.mobileSelect .content { .mobileSelect .content {
width: 100%; width: 100%; /* 宽度100% */
display: block; display: block; /* 显示为块级元素 */
position: fixed; position: fixed; /* 固定定位 */
z-index: 889; z-index: 889; /* 层级为889 */
color: black; color: black; /* 文字颜色为黑色 */
-webkit-transition: all 0.4s; -webkit-transition: all 0.4s; /* 所有属性的过渡效果持续0.4秒 */
transition: all 0.4s; transition: all 0.4s; /* 标准过渡效果 */
bottom: -350px; bottom: -350px; /* 初始位置在视口下方350px处 */
left: 0; left: 0; /* 距离左侧0 */
background: white; background: white; /* 背景色为白色 */
} }
/* 定义 content 内的 fixWidth 类的样式 */
.mobileSelect .content .fixWidth { .mobileSelect .content .fixWidth {
width: 90%; width: 90%; /* 宽度为90% */
margin: 0 auto; margin: 0 auto; /* 上下边距为0，左右自动调整 */
position: relative; position: relative; /* 相对定位 */
} }
/* 定义 fixWidth 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .fixWidth:after { .mobileSelect .content .fixWidth:after {
content: "."; content: "."; /* 内容为点号 */
display: block; display: block; /* 显示为块级元素 */
height: 0; height: 0; /* 高度为0 */
clear: both; clear: both; /* 清除浮动 */
visibility: hidden; visibility: hidden; /* 隐藏 */
} }
/* 定义 content 内的 btnBar 类的样式 */
.mobileSelect .content .btnBar { .mobileSelect .content .btnBar {
border-bottom: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; /* 底部边框 */
font-size: 15px; font-size: 15px; /* 字体大小 */
height: 45px; height: 45px; /* 高度 */
position: relative; position: relative; /* 相对定位 */
text-align: center; text-align: center; /* 文本居中 */
line-height: 45px; line-height: 45px; /* 行高 */
} }
/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
.mobileSelect .content .btnBar .cancel, .mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure { .mobileSelect .content .btnBar .ensure {
height: 45px; height: 45px; /* 高度 */
width: 55px; width: 55px; /* 宽度 */
cursor: pointer; cursor: pointer; /* 鼠标指针样式 */
position: absolute; position: absolute; /* 绝对定位 */
top: 0; top: 0; /* 距离顶部0 */
} }
/* cancel 按钮的样式 */
.mobileSelect .content .btnBar .cancel { .mobileSelect .content .btnBar .cancel {
left: 0; left: 0; /* 距离左侧0 */
color: #666; color: #666; /* 文字颜色 */
} }
/* ensure 按钮的样式 */
.mobileSelect .content .btnBar .ensure { .mobileSelect .content .btnBar .ensure {
right: 0; right: 0; /* 距离右侧0 */
color: #1e83d3; color: #1e83d3; /* 文字颜色 */
} }
/* title 的样式 */
.mobileSelect .content .btnBar .title { .mobileSelect .content .btnBar .title {
font-size: 15px; font-size: 15px; /* 字体大小 */
padding: 0 15%; padding: 0 15%; /* 内边距 */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
white-space: nowrap; white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 超出部分显示省略号 */
} }
/* panel 内的伪元素样式，用于清除浮动 */
.mobileSelect .content .panel:after { .mobileSelect .content .panel:after {
content: "."; content: "."; /* 内容为点号 */
display: block; display: block; /* 显示为块级元素 */
height: 0; height: 0; /* 高度为0 */
clear: both; clear: both; /* 清除浮动 */
visibility: hidden; visibility: hidden; /* 隐藏 */
} }
/* wheels 的样式 */
.mobileSelect .content .panel .wheels { .mobileSelect .content .panel .wheels {
width: 100%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200px */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
} }
/* wheel 的样式 */
.mobileSelect .content .panel .wheel { .mobileSelect .content .panel .wheel {
position: relative; position: relative; /* 相对定位 */
z-index: 0; z-index: 0; /* 层级为0 */
float: left; float: left; /* 左浮动 */
width: 50%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200% */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
-webkit-transition: width 0.3s ease; -webkit-transition: width 0.3s ease; /* Webkit浏览器的过渡效果 */
transition: width 0.3s ease; transition: width 0.3s ease; /* 标准过渡效果 */
} }
/* selectContainer 的样式 */
.mobileSelect .content .panel .wheel .selectContainer { .mobileSelect .content .panel .wheel .selectContainer {
display: block; display: block; /* 显示为块级元素 */
text-align: center; text-align: center; /* 文本居中 */
-webkit-transition: -webkit-transform 0.18s ease-out; -webkit-transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的过渡效果 */
transition: -webkit-transform 0.18s ease-out; transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的标准过渡效果 */
transition: transform 0.18s ease-out; transition: transform 0.18s ease-out; /* 标准过渡效果 */
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; /* 同时应用两种过渡效果 */
} }
/* selectContainer li元素的样式 */
.mobileSelect .content .panel .wheel .selectContainer li { .mobileSelect .content .panel .wheel .selectContainer li {
font-size: 15px; font-size: 15px; /* 字体大小 */
display: block; display: block; /* 显示为块级元素 */
height: 40px; height: 40px; /* 高度40px */
line-height: 40px; line-height: 40px; /* 行高40px */
cursor: pointer; color: #ffffff; /* 文字颜色为白色 */
overflow: hidden; cursor: pointer; /* 鼠标指针样式 */
white-space: nowrap; white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 超出部分显示省略号 */
} }
/* selectLine的样式 */
.mobileSelect .content .panel .selectLine { .mobileSelect .content .panel .selectLine {
height: 40px; height: 40px; /* 高度40px */
width: 100%; width: 100%; /* 宽度100% */
position: absolute; position: absolute; /* 绝对定位 */
top: 80px; top: 80px; /* 距离顶部80px */
pointer-events: none; pointer-events: none; /* 禁止鼠标事件 */
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box; /* Webkit浏览器的盒模型计算方式 */
box-sizing: border-box; box-sizing: border-box; /* 标准盒模型计算方式 */
border-top: 1px solid #DCDCDC; border-top: 1px solid #DCDCDC; /* 上边框 */
border-bottom: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; /* 下边框 */
} }
/* shadowMask的样式 */
.mobileSelect .content .panel .shadowMask { .mobileSelect .content .panel .shadowMask {
position: absolute; position: absolute; /* 绝对定位 */
top: 0; top: 0; /* 距离顶部0 */
width: 100%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200px */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff)); background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变 */
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff); background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* 标准背景渐变 */
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff); background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
opacity: 0.9; background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
pointer-events: none; background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
} background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
}
/* mobileSelect-show类的样式，用于显示时的状态 */
.mobileSelect-show { .mobileSelect-show {
opacity: 1; z-index: 10000; /* z轴层级提高至10000 */
z-index: 10000;
visibility: visible;
} }
/* mobileSelect-show类的content子元素的样式，用于显示时的状态 */
.mobileSelect-show .content { .mobileSelect-show .content {
bottom: 0; bottom: -350px; /* bottom属性设置为-350px，使其完全显示在视窗内 */
} }

548
src/main/webapp/css/xadmin.css
Unescape View File

@ -1,433 +1,439 @@
@charset "utf-8"; @charset "utf-8";
@import url(../lib/layui/css/layui.css); @import url(../lib/layui/css/layui.css);
/* 全局样式 */
* { * {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
a { a {
text-decoration: none; text-decoration: none; /* 去掉链接下划线 */
} }
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x:hidden; overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y:auto; overflow-y: auto; /* 允许垂直滚动 */
} }
body { body {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%; /* 最小高度为视口高度 */
} }
/* 页面主体内容样式 */
.x-body { .x-body {
padding: 20px; padding: 20px; /* 内边距 */
} }
.x-nav { .x-nav {
padding: 0 20px; padding: 0 20px; /* 左右内边距 */
position: relative; position: relative; /* 相对定位 */
z-index: 99; z-index: 99; /* 层级 */
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; /* 底部边框 */
line-height: 39px; line-height: 39px; /* 行高 */
height: 39px; height: 39px; /* 固定高度 */
overflow: hidden; overflow: hidden; /* 隐藏溢出内容 */
} }
xblock { xblock {
display: block; display: block; /* 块级元素 */
margin-bottom: 10px; margin-bottom: 10px; /* 下边距 */
padding: 5px; padding: 5px; /* 内边距 */
line-height: 22px; line-height: 22px; /* 行高 */
/* border-left: 5px solid #009688; */ border-radius: 0 2px 2px 0; /* 圆角 */
border-radius: 0 2px 2px 0; background-color: #f2f2f2; /* 背景色 */
background-color: #f2f2f2;
} }
.x-right { .x-right {
float: right; float: right; /* 右浮动 */
} }
.x-so { .x-so {
/*text-align: center;*/ margin-bottom: 20px; /* 下边距 */
/*background: #f2f2f2 url() 0 0 no-repeat;*/
margin-bottom: 20px;
} }
.x-so input.layui-input { .x-so input.layui-input {
width: 150px; width: 150px; /* 宽度 */
padding-left: 25px; padding-left: 25px; /* 左内边距 */
} }
.x-so .layui-form-label { .x-so .layui-form-label {
display: inline-block; display: inline-block; /* 行内块级元素 */
} }
.x-so input.layui-input, .x-so input.layui-btn { .x-so input.layui-input, .x-so input.layui-btn {
display: inline-block; display: inline-block; /* 行内块级元素 */
} }
.x-red { .x-red {
color: red; color: red; /* 红色字体 */
} }
.x-a { .x-a {
color: #1AA093; color: #1AA093; /* 绿色字体 */
} }
.x-a:hover { .x-a:hover {
color: #127F74; color: #127F74; /* 悬停时的颜色 */
} }
.x-sort { .x-sort {
height: 30px; height: 30px; /* 高度 */
} }
.x-show { .x-show {
cursor: pointer; cursor: pointer; /* 鼠标指针 */
} }
.layui-form-switch { .layui-form-switch {
margin-top: 0px; margin-top: 0px; /* 上边距 */
} }
.layui-input:focus, .layui-textarea:focus { .layui-input:focus, .layui-textarea:focus {
border-color: #189f92!important; border-color: #189f92!important; /* 焦点状态下的边框颜色 */
} }
/* 分页样式 */
.page { .page {
margin-top: 20px; margin-top: 20px; /* 上边距 */
text-align: center; text-align: center; /* 居中对齐 */
} }
.page a { .page a {
display: inline-block; display: inline-block; /* 行内块级元素 */
background: #fff url(#) 0 0 no-repeat; background: #fff url(#) 0 0 no-repeat; /* 背景图 */
color: #888; color: #888; /* 灰色字体 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2; /* 边框 */
} }
.page span { .page span {
display: inline-block; display: inline-block; /* 行内块级元素 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2; /* 边框 */
} }
.page span.current { .page span.current {
display: inline-block; display: inline-block; /* 行内块级元素 */
background: #009688 url(#) 0 0 no-repeat; background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #009688; border: 1px solid #009688; /* 边框 */
} }
.page .pagination li { .page .pagination li {
display: inline-block; display: inline-block; /* 行内块级元素 */
margin-right: 5px; margin-right: 5px; /* 右边距 */
text-align: center; text-align: center; /* 居中对齐 */
} }
.page .pagination li.active span { .page .pagination li.active span {
background: #009688 url(#) 0 0 no-repeat; background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
border: 1px solid #009688; border: 1px solid #009688; /* 边框 */
} }
/* 登录样式 */ /* 登录样式 */
/* 头部 */ /* 头部 */
.container { .container {
width: 100%; width: 100%; /* 宽度 */
height: 45px; height: 45px; /* 高度 */
background-color: #222; background-color: #222; /* 背景色 */
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
} }
.container .logo a { .container .logo a {
float: left; float: left; /* 左浮动 */
color: #fff; color: #fff; /* 白色字体 */
font-size: 18px; font-size: 18px; /* 字体大小 */
padding-left: 20px; padding-left: 20px; /* 左内边距 */
line-height: 45px; line-height: 45px; /* 行高 */
width: 200px; width: 200px; /* 宽度 */
} }
.container .right { .container .right {
background-color:rgba(0,0,0,0); background-color: rgba(0,0,0,0); /* 透明背景 */
float: right; float: right; /* 右浮动 */
} }
.container .left_open { .container .left_open {
height: 45px; height: 45px; /* 高度 */
float: left; float: left; /* 左浮动 */
} }
.container .left_open i { .container .left_open i {
display: block; display: block; /* 块级元素 */
background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
width: 32px; width: 32px; /* 宽度 */
height: 32px; height: 32px; /* 高度 */
line-height: 32px; line-height: 32px; /* 行高 */
border-radius: 3px; border-radius: 3px; /* 圆角 */
text-align: center; text-align: center; /* 居中对齐 */
margin-top: 7px; margin-top: 7px; /* 上边距 */
cursor: pointer; cursor: pointer; /* 鼠标指针 */
} }
.container .left_open i:hover { .container .left_open i:hover {
background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat; background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat; /* 悬停时的背景图 */
} }
.container .left { .container .left {
background-color:rgba(0,0,0,0); background-color: rgba(0,0,0,0); /* 透明背景 */
float: left; float: left; /* 左浮动 */
} }
.container .layui-nav-item { .container .layui-nav-item {
line-height: 45px; line-height: 45px; /* 行高 */
} }
.container .layui-nav-more { .container .layui-nav-more {
top: 20px; top: 20px; /* 上边距 */
} }
.container .layui-nav-child { .container .layui-nav-child {
top: 50px; top: 50px; /* 上边距 */
} }
.container .layui-nav-child i { .container .layui-nav-child i {
margin-right: 10px; margin-right: 10px; /* 右边距 */
}
.layui-nav .layui-nav-item a{
color: #fff;
cursor: pointer;
}
.layui-nav .layui-nav-child a{
color: #333;
cursor: pointer;
} }
.left-nav { .left-nav {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 上边距 */
bottom: 42px; bottom: 42px; /* 下边距 */
left: 0; left: 0; /* 左边距 */
z-index: 2; z-index: 2; /* 层级 */
padding-top: 10px; padding-top: 10px; /* 上内边距 */
background-color: #EEEEEE; width: 220px; /* 宽度 */
width: 220px; max-width: 220px; /* 最大宽度 */
max-width: 220px; background-color: #EEEEEE; /* 背景色 */
overflow: auto; overflow: auto; /* 自动溢出处理 */
/* 设置溢出内容不显示 */
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
/* 左侧导航样式 */
.left-nav {
/* 宽度设置为0，注释掉的代码可以设置具体宽度 */
/* width: 0px; */ /* width: 0px; */
} }
/* 左侧导航列表项样式 */
.left-nav #nav li { .left-nav #nav li {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; /* 底部边框 */
} }
/* 左侧导航列表项鼠标悬停样式 */
.left-nav #nav li:hover > a { .left-nav #nav li:hover > a {
/*color: blue;*/ /* color: blue; */ /* 注释掉的颜色设置 */
}
.left-nav #nav .current{
background-color: rgba(0, 0, 0, 0.3);
} }
.left-nav #nav li a{
font-size: 14px; /* 左侧导航列表项当前选中样式 */
padding: 10px 15px 10px 20px; .left-nav #nav li .current {
display: block; background-color: rgba(0, 0, 0, 0.3); /* 背景色 */
cursor: pointer;
}
.left-nav #nav li a cite{
font-size: 14px;
} }
/* 左侧导航子菜单默认隐藏 */
.left-nav #nav li .sub-menu { .left-nav #nav li .sub-menu {
display: none; display: none;
} }
/* 左侧导航子菜单打开状态 */
.left-nav #nav li .opened { .left-nav #nav li .opened {
display: block; display: block;
} }
/* 左侧导航子菜单打开状态鼠标悬停样式 */
.left-nav #nav li .opened:hover { .left-nav #nav li .opened:hover {
/*background: #fff url() 0 0 no-repeat;*/ /* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
} }
.left-nav #nav li .opened .current{
/* 左侧导航子菜单当前选中样式 */
.left-nav #nav li .opened .current {
/* background: rgba(0, 0, 0, 0); */ /* 注释掉的背景色设置 */
} }
.left-nav #nav li .sub-menu li:hover{
/*color: blue;*/ /* 左侧导航子菜单列表项样式 */
/*background: #fff url() 0 0 no-repeat;*/
}
.left-nav #nav li .sub-menu li a { .left-nav #nav li .sub-menu li a {
padding: 12px 15px 12px 30px; padding: 12px 15px 12px 30px; /* 内边距 */
font-size: 14px; font-size: 14px; /* 字体大小 */
cursor: pointer; cursor: pointer; /* 鼠标指针样式 */
} }
/* 左侧导航子菜单列表项二级菜单样式 */
.left-nav #nav li .sub-menu li .sub-menu li a { .left-nav #nav li .sub-menu li .sub-menu li a {
padding-left: 45px; padding-left: 45px; /* 左内边距 */
} }
.left-nav #nav li .sub-menu li a:hover{
color: #148cf1; /* 左侧导航子菜单列表项鼠标悬停样式 */
.left-nav #nav li .sub-menu li:hover a {
color: #148cf1; /* 颜色 */
/* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
} }
/* 左侧导航子菜单列表项图标样式 */
.left-nav #nav li .sub-menu li a i { .left-nav #nav li .sub-menu li a i {
font-size: 12px; font-size: 12px; /* 字体大小 */
} }
/* 左侧导航列表项右侧箭头样式 */
.left-nav #nav li a i { .left-nav #nav li a i {
padding-right: 10px; float: right; /* 右浮动 */
line-height: 14px; font-size: 16px; /* 字体大小 */
} line-height: 14px; /* 行高 */
.left-nav #nav li .nav_right{ padding-right: 10px; /* 右内边距 */
float: right;
font-size: 16px;
}
.x-slide_left {
width: 17px;
height: 61px;
background: url(#) 0 0 no-repeat;
position: absolute;
top: 200px;
left: 221px;
cursor: pointer;
z-index: 3;
} }
/* 页面内容样式 */
.page-content { .page-content {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 顶部位置 */
right: 0; right: 0; /* 右边位置 */
bottom: 42px; bottom: 42px; /* 底部位置 */
left: 221px; left: 221px; /* 左边位置 */
overflow: hidden; overflow: hidden; /* 隐藏溢出内容 */
z-index: 1; z-index: 1; /* z轴顺序 */
} }
/* 页面内容背景样式 */
.page-content-bg { .page-content-bg {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 顶部位置 */
right: 0; right: 0; /* 右边位置 */
bottom: 42px; bottom: 42px; /* 底部位置 */
left: 221px; left: 221px; /* 左边位置 */
background: rgba(0,0,0,0.5); url() 0 0 no-repeat; background: rgba(0, 0, 0, 0.5); /* 背景色 */
overflow: hidden; url(); /* 背景图 */
z-index: 100; z-index: 100; /* z轴顺序 */
display: none; display: none; /* 默认隐藏 */
}
/* x轴滑动按钮样式 */
.x-slide_left {
width: 17px; /* 宽度 */
height: 61px; /* 高度 */
background: url(#) 0 0 no-repeat; /* 背景图 */
position: absolute; /* 绝对定位 */
top: 200px; /* 顶部位置 */
left: 221px; /* 左边位置 */
cursor: pointer; /* 鼠标指针样式 */
z-index: 3; /* z轴顺序 */
} }
/* 页面内容标签页样式 */
.page-content .tab { .page-content .tab {
height: 100%; height: 100%; /* 高度 */
width: 100%; margin: 0px; /* 外边距 */
background: #EFEEF0 url(#) 0 0 no-repeat; background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
margin: 0px;
} }
/* 页面内容标签页标题样式 */
.page-content .layui-tab-title { .page-content .layui-tab-title {
/*padding-top: 5px;*/ height: 35px; /* 高度 */
height: 35px; background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
background: #EFEEF0 url(#) 0 0 no-repeat; position: relative; /* 相对定位 */
position: relative; z-index: 100; /* z轴顺序 */
z-index: 100;
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home i { .page-content .layui-tab-title li.home i {
padding-right: 5px; padding-right: 5px; /* 右内边距 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home .layui-tab-close { .page-content .layui-tab-title li.home .layui-tab-close {
display: none; display: none; /* 隐藏关闭按钮 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li { .page-content .layui-tab-title li {
line-height: 35px; line-height: 35px; /* 行高 */
} }
.page-content .layui-tab-title .layui-this:after{
height: 36px; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this:after {
height: 63px; /* 高度 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this {
background: #fff url(#) 0 0 no-repeat; /* 背景图 */
} }
.page-content .layui-tab-title li .layui-tab-close{
border-radius: 50%; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this .layui-tab-close {
border-radius: 50%; /* 圆角 */
} }
.page-content .layui-tab-title .layui-this{
background: #fff url(#) 0 0 no-repeat; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li {
border-radius: 50%; /* 圆角 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-bar { .page-content .layui-tab-bar {
height:34px; height: 34px; /* 高度 */
line-height: 35px; line-height: 34px; /* 行高 */
} }
/* 页面内容标签页内容样式 */
.page-content .layui-tab-content { .page-content .layui-tab-content {
position: absolute; top: 36px; /* 顶部位置 */
top: 36px; bottom: 0px; /* 底部位置 */
bottom: 0px; width: 100%; /* 宽度 */
width: 100%; background: #fff url(#) 0 0 no-repeat; /* 背景图 */
background: #fff url(#) 0 0 no-repeat; padding: 0px; /* 内边距 */
padding: 0px; overflow: hidden; /* 隐藏溢出内容 */
overflow: hidden;
} }
.page-content .layui-tab-content .layui-tab-item{
width: 100%;
height: 100%;
/* 页面内容标签页内容项样式 */
.page-content .layui-tab-content .layui-tab-item {
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
} }
.page-content .layui-tab-content .layui-tab-item iframe{
width: 100%;
height: 100%;
} /* 页面内容标签页内容项iframe样式 */
.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* { .page-content .layui-tab-content .layui-tab-item iframe {
background-color:#fff width: 100%; /* 宽度 */
height: 100%; /* 高度 */
} }
.x-admin-backlog .x-admin-backlog-body { /* xadmin后台日志样式 */
display:block; .x-admin-backlog-body {
padding:10px 15px; display: block; /* 显示块级元素 */
background-color:#f8f8f8; padding: 10px 15px; /* 内边距 */
color:#999; background-color: #f8f8f8; /* 背景色 */
border-radius:2px; color: #999; /* 文字颜色 */
transition:all .3s; border-radius: 2px; /* 圆角 */
-webkit-transition:all .3s transition: all .3s ease; /* CSS3过渡效果 */
} }
/* xadmin后台日志标题样式 */
.x-admin-backlog-body h3 { .x-admin-backlog-body h3 {
padding-bottom:10px; padding-bottom: 10px; /* 底部内边距 */
font-size:12px font-size: 12px; /* 字体大小 */
} }
.x-admin-backlog-body p cite {
font-style:normal; /* xadmin后台日志内容样式 */
font-size:30px; .x-admin-backlog-body p {
font-weight:300; font-style: normal; /* 正常字体风格 */
color:#009688 font-size: 30px; /* 字体大小 */
font-weight: 300; /* 字体粗细 */
color: #009689; /* 文字颜色 */
} }
/* xadmin后台日志内容鼠标悬停样式 */
.x-admin-backlog-body:hover { .x-admin-backlog-body:hover {
background-color:#CFCFCF; background-color: #CFCFCF; /* 背景色 */
color:#888 color: #888; /* 文字颜色 */
} }
.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;} /* welcome页脚样式 */
body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;} .welcome-footer {
.welcome-footer a{padding: 0 5px;} padding: 30px 0; /* 内边距 */
text-align: center; /* 文本居中对齐 */
table th, table td { line-height: 30px; /* 行高 */
word-break: break-all; color: #eee; /* 文字颜色 */
background-color: #222; /* 背景色 */
border-top: 1px solid rgba(255, 255, 255, 0.1); /* 边框样式 */
} }
/* foot页脚样式 */
.footer { .footer {
position: fixed; position: fixed; /* 固定定位 */
bottom: 0px; bottom: 0px; /* 底部位置 */
width: 100%; width: 100%; /* 宽度 */
background-color: #222; background-color: #222; /* 背景色 */
border-top: 1px solid rgba(255, 255, 255, 0.2); line-height: 41px; /* 行高 */
line-height: 41px; color: #fff; /* 文字颜色 */
color: #fff;
/*padding-left: 10px;*/
} }
/* foot页脚版权样式 */
.footer .copyright { .footer .copyright {
margin-left: 10px; margin-left: 10px; /* 左内边距 */
} }
/* table表格样式 */
@media screen and (max-width: 768px){ table th, table td {
.fast-add{ word-break: break-all; /* CSS属性：允许在单词内换行 */
display: none;
}
.layui-nav .to-index{
display: none;
}
.container .logo a{
width: 140px;
}
.container .left_open {
/*float: right;*/
}
.left-nav{
left: -221px;
}
.page-content{
left: 0px;
}
.page-content .layui-tab-content .layui-tab-item{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.x-so input.layui-input{
width: 100%;
margin: 10px;
} }
.layui-input{
margin-left: 20px;
} }
}

430
src/main/webapp/js/mobileSelect.js
Unescape View File

@ -4,66 +4,69 @@
* Released under the MIT License. * Released under the MIT License.
*/ */
(function() { (function(window) {
// 获取指定元素的类名
function getClass(dom, string) { function getClass(dom, string) {
return dom.getElementsByClassName(string); return dom.getElementsByClassName(string);
} }
// 构造器 // 构造器
function MobileSelect(config) { function MobileSelect(config) {
this.mobileSelect; this.mobileSelect; // DOM元素，表示整个选择器
this.wheelsData = config.wheels; this.wheelsData = config.wheels; // 滚轮数据
this.jsonType = false; this.jsonType = false; // 是否为JSON类型数据
this.cascadeJsonData = []; this.cascadeJsonData = []; // 级联JSON数据
this.displayJson = []; this.displayJson = []; // 显示的JSON数据
this.curValue = null; this.curValue = null; // 当前值
this.curIndexArr = []; this.curIndexArr = []; // 当前索引数组
this.cascade = false; this.startY; // 起始Y坐标
this.startY; this.moveEndY; // 结束Y坐标
this.moveEndY; this.moveY; // 移动Y坐标
this.moveY; this.oldMoveY; // 旧的移动Y坐标
this.oldMoveY; this.offset = 0; // 偏移量
this.offset = 0; this.offsetSum = 0; // 偏移总和
this.offsetSum = 0; this.oversizeBorder; // 超出边界大小
this.oversizeBorder; this.curDistance = []; // 当前距离数组
this.curDistance = []; this.clickStatus = false; // 点击状态
this.clickStatus = false; this.isPC = true; // 是否为PC端
this.isPC = true;
this.init(config); this.init(config);
} }
// 原型链
MobileSelect.prototype = { MobileSelect.prototype = {
constructor: MobileSelect, constructor: MobileSelect,
// 初始化函数
init: function(config) { init: function(config) {
var _this = this; var _this = this;
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'}; _this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }; // 键值映射
_this.checkDataType(); _this.checkDataType(); // 检查数据类型
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); // 渲染滚轮
_this.trigger = document.querySelector(config.trigger); _this.trigger = document.querySelector(config.trigger); // 触发器元素
if (!_this.trigger) { if (!_this.trigger) {
console.error('mobileSelect has been successfully installed, but no trigger found on your page.'); console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
return false; return false;
} }
_this.wheel = getClass(_this.mobileSelect,'wheel'); _this.wheel = getClass(_this.mobileSelect, 'wheel'); // 获取滚轮元素
_this.slider = getClass(_this.mobileSelect,'selectContainer'); _this.slider = getClass(_this.mobileSelect, 'selectContainer'); // 获取滑块容器
_this.wheels = _this.mobileSelect.querySelector('.wheels'); _this.wheels = _this.mobileSelect.querySelector('.wheels'); // 获取所有滚轮的容器
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; _this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; // 获取每个选项的高度
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure'); _this.ensureBtn = getClass(_this.mobileSelect, 'ensure'); // 确保按钮
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel'); _this.cancelBtn = getClass(_this.mobileSelect, 'cancel'); // 取消按钮
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer'); _this.grayLayer = getClass(_this.mobileSelect, 'grayLayer'); // 灰色遮罩层
_this.popUp = _this.mobileSelect.querySelector('.content'); _this.popUp = getClass(_this.mobileSelect, 'content'); // 弹出层
_this.callback = config.callback ? config.callback : function(){}; _this.callback = config.callback ? config.callback : function() {}; // 回调函数
_this.cancel = config.cancel ? config.cancel : function(){}; _this.cancel = config.cancel ? config.cancel : function() {}; // 取消函数
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){}; _this.transitionEnd = config.transitionEnd ? config.transitionEnd : function() {}; // 过渡结束函数
_this.initPosition = config.position ? config.position : []; _this.titleText = config.title ? config.title : ''; // 标题文本
_this.titleText = config.title ? config.title : ''; _this.connector = config.connector ? config.connector : ' '; // 连接符
_this.connector = config.connector ? config.connector : ' '; _this.triggerDisplayData = !(typeof(config.triggerDisplayData) == 'undefined') ? config.triggerDisplayData : true; // 是否显示在触发器上
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true; _this.trigger.style.cursor = 'pointer'; // 设置触发器的鼠标样式为指针
_this.trigger.style.cursor='pointer'; _this.setStyle(config); // 设置样式
_this.setStyle(config); _this.setTitle(_this.titleText); // 设置标题
_this.setTitle(_this.titleText); _this.checkIsPC(); // 检查是否是PC端
_this.checkIsPC(); _this.checkCascade(); // 检查是否需要级联
_this.checkCascade();
if (_this.cascade) { if (_this.cascade) {
_this.initCascade(); _this.initCascade(); // 初始化级联
} }
// 定位初始位置 // 定位初始位置
if (_this.initPosition.length < _this.slider.length) { if (_this.initPosition.length < _this.slider.length) {
@ -72,104 +75,75 @@
_this.initPosition.push(0); _this.initPosition.push(0);
} }
} }
_this.setCurDistance(_this.initPosition); // 设置当前距离
_this.setCurDistance(_this.initPosition); _this.addListenerAll(); // 添加事件监听器
_this.addListenerAll();
//按钮监听
_this.cancelBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.ensureBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
var tempValue ='';
for(var i=0; i<_this.wheel.length; i++){
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
}
if(_this.triggerDisplayData){
_this.trigger.innerHTML = tempValue;
}
_this.curIndexArr = _this.getIndexArr();
_this.curValue = _this.getCurValue();
_this.callback(_this.curIndexArr, _this.curValue);
});
_this.trigger.addEventListener('click',function(){
_this.mobileSelect.classList.add('mobileSelect-show');
});
_this.grayLayer.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.popUp.addEventListener('click',function(event){
event.stopPropagation();
});
_this.fixRowStyle(); // 修正列数 _this.fixRowStyle(); // 修正列数
}, },
// 设置标题
setTitle: function(string) { setTitle: function(string) {
var _this = this; var _this = this;
_this.titleText = string; _this.titleText = string;
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText; _this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
}, },
// 设置样式
setStyle: function(config) { setStyle: function(config) {
var _this = this; var _this = this;
if (config.ensureBtnColor) { if (config.ensureBtnColor) {
_this.ensureBtn.style.color = config.ensureBtnColor; _this.ensureBtn.style.color = config.ensureBtnColor; // 确保按钮颜色
} }
if (config.cancelBtnColor) { if (config.cancelBtnColor) {
_this.cancelBtn.style.color = config.cancelBtnColor; _this.cancelBtn.style.color = config.cancelBtnColor; // 取消按钮颜色
} }
if (config.titleColor) { if (config.titleColor) {
_this.title = _this.mobileSelect.querySelector('.title'); _this.title = _this.mobileSelect.querySelector('.title'); // 标题元素
_this.title.style.color = config.titleColor; _this.title.style.color = config.titleColor; // 标题颜色
} }
if (config.textColor) { if (config.textColor) {
_this.panel = _this.mobileSelect.querySelector('.panel'); _this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.panel.style.color = config.textColor; _this.panel.style.color = config.textColor; // 文本颜色
} }
if (config.titleBgColor) { if (config.titleBgColor) {
_this.btnBar = _this.mobileSelect.querySelector('.btnBar'); _this.btnBar = _this.mobileSelect.querySelector('.btnBar'); // 按钮栏元素
_this.btnBar.style.backgroundColor = config.titleBgColor; _this.btnBar.style.backgroundColor = config.titleBgColor; // 按钮栏背景颜色
} }
if (config.bgColor) { if (config.bgColor) {
_this.panel = _this.mobileSelect.querySelector('.panel'); _this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); _this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); // 阴影遮罩层元素
_this.panel.style.backgroundColor = config.bgColor; _this.panel.style.backgroundColor = config.bgColor; // 面板背景颜色
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')'; _this.shadowMask.style.background = 'linear-gradient(to bottom, ' + config.bgColor + ', rgba(255, 255, 255, 0), ' + config.bgColor + ')'; // 阴影遮罩层渐变背景
} }
}, },
// 检查是否是PC端
checkIsPC: function() { checkIsPC: function() {
var _this = this; var _this = this;
var sUserAgent = navigator.userAgent.toLowerCase(); var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; // 判断是否为iPad
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; // 判断是否为iPhone OS
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; // 判断是否为MIDP设备
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; // 判断是否为UC7浏览器
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; // 判断是否为UC浏览器
var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; // 判断是否为Android设备
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; // 判断是否为Windows CE设备
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; // 判断是否为Windows Mobile设备
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
_this.isPC = false; _this.isPC = false;
} }
}, },
show: function(){ show: function(){
// 显示选择器，通过添加类名来控制显示
this.mobileSelect.classList.add('mobileSelect-show'); this.mobileSelect.classList.add('mobileSelect-show');
}, },
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){ renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
var _this = this; var _this = this;
var cancelText = cancelBtnText ? cancelBtnText : '取消'; var cancelText = cancelBtnText ? cancelBtnText : '取消'; // 设置取消按钮文本
var ensureText = ensureBtnText ? ensureBtnText : '确认'; var ensureText = ensureBtnText ? ensureBtnText : '确认'; // 设置确认按钮文本
_this.mobileSelect = document.createElement("div"); _this.mobileSelect = document.createElement("div"); // 创建选择器的容器元素
_this.mobileSelect.className = "mobileSelect"; _this.mobileSelect.className = "mobileSelect"; // 设置容器的类名
_this.mobileSelect.innerHTML = _this.mobileSelect.innerHTML =
'<div class="grayLayer"></div>'+ '<div class="grayLayer"></div>'+
'<div class="content">'+ '<div class="content">'+
@ -189,34 +163,30 @@
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'</div>'; '</div>';
document.body.appendChild(_this.mobileSelect); document.body.appendChild(_this.mobileSelect); // 将选择器添加到页面中
//根据数据长度来渲染
// 根据数据长度来渲染轮盘
var tempHTML=''; var tempHTML='';
for(var i=0; i<wheelsData.length; i++){ for(var i=0; i<wheelsData.length; i++){
//列 tempHTML += '<div class="wheel"><ul class="selectContainer">'; // 开始一个新的轮盘
tempHTML += '<div class="wheel"><ul class="selectContainer">';
if(_this.jsonType){ if(_this.jsonType){
for(var j=0; j<wheelsData[i].data.length; j++){ for(var j=0; j<wheelsData[i].data.length; j++){
//行 tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>'; // 如果是JSON类型，使用键值对填充列表项
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
} }
}else{ }else{
for(var j=0; j<wheelsData[i].data.length; j++){ for(var j=0; j<wheelsData[i].data.length; j++){
//行 tempHTML += '<li>'+wheelsData[i].data[j]+'</li>'; // 如果不是JSON类型，直接使用数据填充列表项
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
} }
} }
tempHTML += '</ul></div>'; tempHTML += '</ul></div>'; // 结束当前轮盘
} }
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; _this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; // 将生成的HTML添加到轮盘容器中
}, },
addListenerAll: function(){ addListenerAll: function(){
var _this = this; var _this = this;
for(var i=0; i<_this.slider.length; i++){ for(var i=0; i<_this.slider.length; i++){
//手势监听 // 为每个滑块添加手势监听和点击监听
(function (i) { (function (i) {
_this.addListenerWheel(_this.wheel[i], i); _this.addListenerWheel(_this.wheel[i], i);
_this.addListenerLi(i); _this.addListenerLi(i);
@ -227,35 +197,39 @@
addListenerWheel: function(theWheel, index){ addListenerWheel: function(theWheel, index){
var _this = this; var _this = this;
theWheel.addEventListener('touchstart', function () { theWheel.addEventListener('touchstart', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸开始事件处理
},false); },false);
theWheel.addEventListener('touchend', function () { theWheel.addEventListener('touchend', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸结束事件处理
},false); },false);
theWheel.addEventListener('touchmove', function () { theWheel.addEventListener('touchmove', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸移动事件处理
},false); },false);
if(_this.isPC){ if(_this.isPC){
//如果是PC端则再增加拖拽监听 方便调试 // 如果是PC端则再增加拖拽监听，方便调试
theWheel.addEventListener('mousedown', function () { theWheel.addEventListener('mousedown', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标按下事件处理
},false); },false);
theWheel.addEventListener('mousemove', function () { theWheel.addEventListener('mousemove', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标移动事件处理
},false); },false);
theWheel.addEventListener('mouseup', function () { theWheel.addEventListener('mouseup', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标抬起事件处理
},true); },true);
} }
}, },
addListenerLi: function(sliderIndex) { addListenerLi: function(sliderIndex) {
// 获取当前对象引用
var _this = this; var _this = this;
// 获取指定滑块索引的所有列表项元素
var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li'); var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
// 遍历所有列表项，为每个列表项添加点击事件监听器
for (var j = 0; j < curWheelLi.length; j++) { for (var j = 0; j < curWheelLi.length; j++) {
(function(j) { (function(j) {
curWheelLi[j].addEventListener('click', function() { curWheelLi[j].addEventListener('click', function() {
// 当列表项被点击时，调用singleClick方法处理点击事件
_this.singleClick(this, j, sliderIndex); _this.singleClick(this, j, sliderIndex);
}, false); }, false);
})(j); })(j);
@ -263,71 +237,83 @@
}, },
checkDataType: function() { checkDataType: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 检查wheelsData中第一个数据项是否为对象类型
if (typeof(_this.wheelsData[0].data[0]) == 'object') { if (typeof(_this.wheelsData[0].data[0]) == 'object') {
_this.jsonType = true; _this.jsonType = true; // 如果是对象类型，设置jsonType为true
} }
}, },
checkCascade: function() { checkCascade: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 如果数据类型为JSON
if (_this.jsonType) { if (_this.jsonType) {
var node = _this.wheelsData[0].data; var node = _this.wheelsData[0].data;
// 遍历数据节点，检查是否存在子节点
for (var i = 0; i < node.length; i++) { for (var i = 0; i < node.length; i++) {
if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
_this.cascade = true; _this.cascade = true; // 如果存在子节点，设置级联标志为true
_this.cascadeJsonData = _this.wheelsData[0].data; _this.cascadeJsonData = _this.wheelsData[0].data; // 保存级联数据
break; break; // 找到第一个有子节点的节点后退出循环
} }
} }
} else { } else {
_this.cascade = false; _this.cascade = false; // 如果数据类型不是JSON，设置级联标志为false
} }
}, },
generateArrData: function(targetArr) { generateArrData: function(targetArr) {
var tempArr = []; var tempArr = []; // 初始化临时数组用于存储转换后的数据
var keyMap_id = this.keyMap.id; var keyMap_id = this.keyMap.id; // 获取键映射中的ID键名
var keyMap_value = this.keyMap.value; var keyMap_value = this.keyMap.value; // 获取键映射中的值键名
// 遍历目标数组，将每个元素转换为包含ID和值的对象
for (var i = 0; i < targetArr.length; i++) { for (var i = 0; i < targetArr.length; i++) {
var tempObj = {}; var tempObj = {};
tempObj[keyMap_id] = targetArr[i][this.keyMap.id]; tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
tempObj[keyMap_value] = targetArr[i][this.keyMap.value]; tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
tempArr.push(tempObj); tempArr.push(tempObj);
} }
return tempArr; return tempArr; // 返回转换后的数组
}, },
initCascade: function() { initCascade: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 生成并添加级联数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData)); _this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
// 如果初始化位置数组不为空，则进行深度初始化
if (_this.initPosition.length > 0) { if (_this.initPosition.length > 0) {
_this.initDeepCount = 0; _this.initDeepCount = 0; // 初始化深度计数器
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); _this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); // 递归初始化子节点
} else { } else {
_this.checkArrDeep(_this.cascadeJsonData[0]); _this.checkArrDeep(_this.cascadeJsonData[0]); // 如果初始化位置为空，直接检查第一层数据
} }
_this.reRenderWheels(); _this.reRenderWheels(); // 重新渲染轮盘组件
}, },
initCheckArrDeep: function(parent) { initCheckArrDeep: function(parent) {
// 获取当前对象引用
var _this = this; var _this = this;
// 如果父节点存在且具有子节点
if (parent) { if (parent) {
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
// 生成并添加子节点数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
_this.initDeepCount++; _this.initDeepCount++; // 增加深度计数器
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; // 获取下一个节点
if (nextNode) { if (nextNode) {
_this.initCheckArrDeep(nextNode); _this.initCheckArrDeep(nextNode); // 递归初始化下一个节点
} else { } else {
_this.checkArrDeep(parent[_this.keyMap.childs][0]); _this.checkArrDeep(parent[_this.keyMap.childs][0]); // 如果下一个节点不存在，检查第一个子节点
} }
} }
} }
}, },
checkArrDeep: function (parent) { checkArrDeep: function (parent) {
//检测子节点深度 修改 displayJson // 检测子节点深度并修改 displayJson
var _this = this; var _this = this;
if(parent){ if(parent){
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
@ -341,7 +327,7 @@
var _this = this; var _this = this;
var deleteNum = _this.displayJson.length - 1 - index; var deleteNum = _this.displayJson.length - 1 - index;
for(var i=0; i<deleteNum; i++){ for(var i=0; i<deleteNum; i++){
_this.displayJson.pop(); //修改 displayJson _this.displayJson.pop(); // 修改 displayJson，删除多余的层级
} }
var resultNode; var resultNode;
for (var i = 0; i <= index; i++){ for (var i = 0; i <= index; i++){
@ -351,11 +337,10 @@
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]]; resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
} }
} }
_this.checkArrDeep(resultNode); _this.checkArrDeep(resultNode); // 检查并更新子节点深度
//console.log(_this.displayJson); _this.reRenderWheels(); // 重新渲染轮盘
_this.reRenderWheels(); _this.fixRowStyle(); // 修正行样式
_this.fixRowStyle(); _this.setCurDistance(_this.resetPosition(index, posIndexArr)); // 设置当前距离和重置位置
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
}, },
resetPosition: function(index, posIndexArr){ resetPosition: function(index, posIndexArr){
@ -365,16 +350,16 @@
if(_this.slider.length > posIndexArr.length){ if(_this.slider.length > posIndexArr.length){
tempCount = _this.slider.length - posIndexArr.length; tempCount = _this.slider.length - posIndexArr.length;
for(var i=0; i<tempCount; i++){ for(var i=0; i<tempCount; i++){
tempPosArr.push(0); tempPosArr.push(0); // 如果滑块数量多于位置数组长度，填充0
} }
}else if(_this.slider.length < posIndexArr.length){ }else if(_this.slider.length < posIndexArr.length){
tempCount = posIndexArr.length - _this.slider.length; tempCount = posIndexArr.length - _this.slider.length;
for(var i=0; i<tempCount; i++){ for(var i=0; i<tempCount; i++){
tempPosArr.pop(); tempPosArr.pop(); // 如果滑块数量少于位置数组长度，移除多余的位置
} }
} }
for(var i=index+1; i< tempPosArr.length; i++){ for(var i=index+1; i< tempPosArr.length; i++){
tempPosArr[i] = 0; tempPosArr[i] = 0; // 将当前索引之后的位置设置为0
} }
return tempPosArr; return tempPosArr;
}, },
@ -385,7 +370,7 @@
if(_this.wheel.length > _this.displayJson.length){ if(_this.wheel.length > _this.displayJson.length){
var count = _this.wheel.length - _this.displayJson.length; var count = _this.wheel.length - _this.displayJson.length;
for(var i=0; i<count; i++){ for(var i=0; i<count; i++){
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); _this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); // 移除多余的wheel元素
} }
} }
for(var i=0; i<_this.displayJson.length; i++){ for(var i=0; i<_this.displayJson.length; i++){
@ -398,8 +383,7 @@
// 行 // 行
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>'; tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
} }
_this.slider[i].innerHTML = tempHTML; _this.slider[i].innerHTML = tempHTML; // 更新现有wheel的HTML内容
}else{ }else{
var tempWheel = document.createElement("div"); var tempWheel = document.createElement("div");
tempWheel.className = "wheel"; tempWheel.className = "wheel";
@ -409,12 +393,11 @@
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>'; tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
} }
tempHTML += '</ul>'; tempHTML += '</ul>';
tempWheel.innerHTML = tempHTML; tempWheel.innerHTML = tempHTML; // 创建新的wheel并设置HTML内容
_this.addListenerWheel(tempWheel, i); // 为新wheel添加事件监听器
_this.addListenerWheel(tempWheel, i); _this.wheels.appendChild(tempWheel); // 将新wheel添加到DOM中
_this.wheels.appendChild(tempWheel);
} }
_this.addListenerLi(i); _this.addListenerLi(i); // 为每个li添加事件监听器
})(i); })(i);
} }
}, },
@ -422,9 +405,11 @@
updateWheels: function(data) { updateWheels: function(data) {
var _this = this; var _this = this;
if (_this.cascade) { if (_this.cascade) {
// 更新级联数据源
_this.cascadeJsonData = data; _this.cascadeJsonData = data;
_this.displayJson = []; _this.displayJson = [];
_this.initCascade(); _this.initCascade();
// 确保初始化位置数组长度与滑块数量一致
if (_this.initPosition.length < _this.slider.length) { if (_this.initPosition.length < _this.slider.length) {
var diff = _this.slider.length - _this.initPosition.length; var diff = _this.slider.length - _this.initPosition.length;
for (var i = 0; i < diff; i++) { for (var i = 0; i < diff; i++) {
@ -442,13 +427,14 @@
if (_this.cascade) { if (_this.cascade) {
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源'); console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
return false; return false;
} } else if (_this.jsonType) {
else if(_this.jsonType){ // 处理JSON类型的数据
for (var j = 0; j < data.length; j++) { for (var j = 0; j < data.length; j++) {
tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>'; tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>';
} }
_this.wheelsData[sliderIndex] = { data: data }; _this.wheelsData[sliderIndex] = { data: data };
} else { } else {
// 处理普通数组类型的数据
for (var j = 0; j < data.length; j++) { for (var j = 0; j < data.length; j++) {
tempHTML += '<li>' + data[j] + '</li>'; tempHTML += '<li>' + data[j] + '</li>';
} }
@ -487,8 +473,7 @@
for (var i = 0; i < _this.wheel.length; i++) { for (var i = 0; i < _this.wheel.length; i++) {
temp.push(_this.displayJson[i][positionArr[i]]); temp.push(_this.displayJson[i][positionArr[i]]);
} }
} } else if (_this.jsonType) {
else if(_this.jsonType){
for (var i = 0; i < _this.curDistance.length; i++) { for (var i = 0; i < _this.curDistance.length; i++) {
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]); temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
} }
@ -505,6 +490,7 @@
}, },
calcDistance: function(index){ calcDistance: function(index){
// 计算给定索引对应的距离，基于liHeight的倍数
return 2*this.liHeight-index*this.liHeight; return 2*this.liHeight-index*this.liHeight;
}, },
@ -512,38 +498,44 @@
var _this = this; var _this = this;
var temp = []; var temp = [];
for(var i=0; i<_this.slider.length; i++){ for(var i=0; i<_this.slider.length; i++){
temp.push(_this.calcDistance(indexArr[i])); temp.push(_this.calcDistance(indexArr[i])); // 计算每个滑块的距离并存储在临时数组中
_this.movePosition(_this.slider[i],temp[i]); _this.movePosition(_this.slider[i],temp[i]); // 移动滑块到计算出的位置
} }
_this.curDistance = temp; _this.curDistance = temp; // 更新当前距离数组
}, },
fixPosition: function(distance){ fixPosition: function(distance){
// 根据距离修正位置，确保滑块不会超出边界
return -(this.getIndex(distance)-2)*this.liHeight; return -(this.getIndex(distance)-2)*this.liHeight;
}, },
movePosition: function(theSlider, distance){ movePosition: function(theSlider, distance){
// 使用CSS transform属性移动滑块到指定位置
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)'; theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)'; theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
}, },
locatePosition: function(index, posIndex){ locatePosition: function(index, posIndex){
// 定位滑块到特定位置
this.curDistance[index] = this.calcDistance(posIndex); this.curDistance[index] = this.calcDistance(posIndex);
this.movePosition(this.slider[index],this.curDistance[index]); this.movePosition(this.slider[index],this.curDistance[index]);
if(_this.cascade){ if(_this.cascade){
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果启用级联，检查范围
} }
}, },
updateCurDistance: function(theSlider, index){ updateCurDistance: function(theSlider, index){
// 更新当前滑块的距离
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]); this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
}, },
getDistance:function(theSlider){ getDistance:function(theSlider){
// 获取滑块当前的垂直距离
return parseInt(theSlider.style.transform.split(',')[1]); return parseInt(theSlider.style.transform.split(',')[1]);
}, },
getInnerHtml: function(sliderIndex){ getInnerHtml: function(sliderIndex){
// 获取滑块当前选中项的内部HTML内容
var _this = this; var _this = this;
var index = _this.getIndex(_this.curDistance[sliderIndex]); var index = _this.getIndex(_this.curDistance[sliderIndex]);
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML; return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
@ -554,14 +546,13 @@
event = event || window.event; event = event || window.event;
switch (event.type) { switch (event.type) {
case "touchstart": case "touchstart":
_this.startY = event.touches[0].clientY; _this.startY = event.touches[0].clientY; // 记录触摸开始时的Y坐标
_this.oldMoveY = _this.startY; _this.oldMoveY = _this.startY; // 初始化旧的移动Y坐标
break; break;
case "touchend": case "touchend":
_this.moveEndY = event.changedTouches[0].clientY; // 记录触摸结束时的Y坐标
_this.moveEndY = event.changedTouches[0].clientY; _this.offsetSum = _this.moveEndY - _this.startY; // 计算总偏移量
_this.offsetSum = _this.moveEndY - _this.startY;
// 修正位置 // 修正位置
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index);
@ -569,14 +560,12 @@
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]);
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight;
// 反弹效果处理
//反弹
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2 * _this.liHeight; _this.curDistance[index] = 2 * _this.liHeight;
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]);
}, 100); }, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder; _this.curDistance[index] = _this.oversizeBorder;
setTimeout(function () { setTimeout(function () {
@ -584,107 +573,80 @@
}, 100); }, 100);
} }
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
if (_this.cascade) { if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果启用级联，检查范围
}
break;
case "touchmove":
event.preventDefault();
_this.moveY = event.touches[0].clientY;
_this.offset = _this.moveY - _this.oldMoveY;
_this.updateCurDistance(theSlider, index);
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oldMoveY = _this.moveY;
break;
} }
},
dragClick: function(event, theSlider, index){
var _this = this;
event = event || window.event;
switch(event.type){
case "mousedown":
_this.startY = event.clientY;
_this.oldMoveY = _this.startY;
_this.clickStatus = true;
break; break;
// 处理鼠标抬起事件
case "mouseup": case "mouseup":
_this.moveEndY = event.clientY; // 获取鼠标抬起时的Y坐标
_this.moveEndY = event.clientY; _this.offsetSum = _this.moveEndY - _this.startY; // 计算鼠标移动的距离
_this.offsetSum = _this.moveEndY - _this.startY;
// 修正位置 // 修正位置
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); // 修正位置，防止超出边界
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight; _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; // 设置超出边界的最小值
//反弹 // 反弹效果
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2*_this.liHeight; _this.curDistance[index] = 2 * _this.liHeight; // 如果超过上界，设置为上界
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到上界位置
}, 100); }, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder; _this.curDistance[index] = _this.oversizeBorder; // 如果超过下界，设置为下界
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到下界位置
}, 100); }, 100);
} }
_this.clickStatus = false; _this.clickStatus = false; // 重置点击状态
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue()); _this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
if (_this.cascade) { if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果是级联选择器，检查范围
} }
break; break;
// 处理鼠标移动事件
case "mousemove": case "mousemove":
event.preventDefault(); event.preventDefault(); // 阻止默认行为
if (_this.clickStatus) { if (_this.clickStatus) {
_this.moveY = event.clientY; _this.moveY = event.clientY; // 获取当前鼠标Y坐标
_this.offset = _this.moveY - _this.oldMoveY; _this.offset = _this.moveY - _this.oldMoveY; // 计算偏移量
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.curDistance[index] + _this.offset; _this.curDistance[index] = _this.curDistance[index] + _this.offset; // 更新当前距离
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oldMoveY = _this.moveY; _this.oldMoveY = _this.moveY; // 更新旧的Y坐标
} }
break; break;
} }
}, },
// 处理单击事件
singleClick: function (theLi, index, sliderIndex) { singleClick: function (theLi, index, sliderIndex) {
var _this = this; var _this = this;
if (_this.cascade) { if (_this.cascade) {
var tempPosArr = _this.getIndexArr(); var tempPosArr = _this.getIndexArr(); // 获取当前索引数组
tempPosArr[sliderIndex] = index; tempPosArr[sliderIndex] = index; // 更新指定滑块的索引
_this.checkRange(sliderIndex, tempPosArr); _this.checkRange(sliderIndex, tempPosArr); // 检查范围
} else { } else {
_this.curDistance[sliderIndex] = (2-index)*_this.liHeight; _this.curDistance[sliderIndex] = (2 - index) * _this.liHeight; // 计算新的距离
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); _this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); // 移动到新的位置
} }
} }
}; };
if (typeof exports == "object") { if (typeof exports == "object") {
module.exports = MobileSelect; module.exports = MobileSelect; // CommonJS模块导出
} else if (typeof define == "function" && define.amd) { } else if (typeof define == "function" && define.amd) {
define([], function () { define([], function () {
return MobileSelect; return MobileSelect; // AMD模块定义
}) })
} else { } else {
window.MobileSelect = MobileSelect; window.MobileSelect = MobileSelect; // 全局变量导出
} }
})(); })();

339
src/main/webapp/js/xadmin.js
Unescape View File

@ -1,195 +1,181 @@
;!function (win) { // 定义一个立即执行的函数表达式 (IIFE)，传入全局对象 window
"use strict"; !function(win) {
var doc = document "use strict"; // 使用严格模式
var doc = document; // 获取文档对象
,Xadmin = function(){ // 定义 Xadmin 构造函数
var Xadmin = function() {
this.v = '2.2'; // 版本号 this.v = '2.2'; // 版本号
} }
// 初始化方法
Xadmin.prototype.init = function() { Xadmin.prototype.init = function() {
var tab_list = this.get_data(); var tab_list = this.get_data(); // 获取所有标签页数据
for (var i in tab_list) { for (var i in tab_list) {
this.add_lay_tab(tab_list[i].title,tab_list[i].url,i); this.add_lay_tab(tab_list[i].title, tab_list[i].url, i); // 添加标签页
} }
element.tabChange('xbs_tab', i); element.tabChange('xbs_tab', i); // 切换到最后一个标签页
}; };
/**
* [end 执行结束要做的]
* @return {[type]} [description]
*/
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data();
// 结束方法，用于执行一些收尾工作
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data(); // 获取分类数据
for (var i in cate_list) { for (var i in cate_list) {
if (cate_list[i] != null) { if (cate_list[i] != null) {
$('.left-nav #nav li').eq(cate_list[i]).click(); $('.left-nav #nav li').eq(cate_list[i]).click(); // 点击左侧导航栏的对应项
} }
} }
}; };
// 添加标签页方法
Xadmin.prototype.add_tab = function(title, url, is_refresh) { Xadmin.prototype.add_tab = function(title, url, is_refresh) {
var id = md5(url);//md5每个url var id = md5(url); // 对 URL 进行 MD5 加密生成唯一 ID
//重复点击 // 检查是否已经存在相同的标签页
for (var i = 0; i < $('.x-iframe').length; i++) { for (var i = 0; i < $('.x-iframe').length; i++) {
if ($('.x-iframe').eq(i).attr('tab-id') == id) { if ($('.x-iframe').eq(i).attr('tab-id') == id) {
element.tabChange('xbs_tab', id); element.tabChange('xbs_tab', id); // 切换到已存在的标签页
if (is_refresh) if (is_refresh)
$('.x-iframe').eq(i).attr("src",$('.x-iframe').eq(i).attr('src')); $('.x-iframe').eq(i).attr("src", $('.x-iframe').eq(i).attr('src')); // 刷新页面
return; return;
} }
}; }
this.add_lay_tab(title,url,id);
this.set_data(title,url,id);
element.tabChange('xbs_tab', id);
this.add_lay_tab(title, url, id); // 添加新的标签页
this.set_data(title, url, id); // 保存标签页数据
element.tabChange('xbs_tab', id); // 切换到新添加的标签页
} }
// 删除标签页方法
Xadmin.prototype.del_tab = function(id) { Xadmin.prototype.del_tab = function(id) {
if (id) { if (id) {
console.log(88); console.log(88); // 打印日志（调试用）
} else { } else {
var id = $(window.frameElement).attr('tab-id'); var id = $(window.frameElement).attr('tab-id'); // 获取当前窗口的 tab-id
parent.element.tabDelete('xbs_tab', id); parent.element.tabDelete('xbs_tab', id); // 删除父窗口中的标签页
} }
} }
// 添加 Layui 标签页方法
Xadmin.prototype.add_lay_tab = function(title, url, id) { Xadmin.prototype.add_lay_tab = function(title, url, id) {
element.tabAdd('xbs_tab', { element.tabAdd('xbs_tab', {
title: title title: title, // 标签标题
,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>' content: '<iframe tab-id="' + id + '" frameborder="0" scrolling="yes" class="x-iframe"></iframe>', // 标签内容为 iframe
,id: id id: id // 标签 ID
}) })
} }
/**
* [open 打开弹出层] // 打开弹出层方法
* @param {[type]} title [弹出层标题]
* @param {[type]} url [弹出层地址]
* @return {[type]} [description]
*/
Xadmin.prototype.open = function(title, url) { Xadmin.prototype.open = function(title, url) {
if (title == null || title == '') { if (title == null || title == '') {
var title=false; var title = false; // 如果标题为空，则不显示标题
}; };
if (url == null || url == '') { if (url == null || url == '') {
var url="404.html"; var url = "404.html"; // 如果 URL 为空，则默认指向 404 页面
}; };
if (w == null || w == '') { if (w == null || w == '') {
var w=($(window).width()*0.9); var w = ($(window).width() * 0.9); // 设置宽度为窗口宽度的 90%
}; };
if (h == null || h == '') { if (h == null || h == '') {
var h=($(window).height() - 50); var h = ($(window).height() - 50); // 设置高度为窗口高度减去 50px
}; };
var index = layer.open({ var index = layer.open({
type: 2, type: 2, // 类型为 iframe
area: [w+'px', h +'px'], area: [w + 'px', h + 'px'], // 设置弹出层大小
fix: false, //不固定 fix: false, // 不固定位置
maxmin: true, maxmin: true, // 允许最大化和最小化
shadeClose: true, shadeClose: true, // 点击遮罩关闭弹出层
shade:0.4, shade: 0.4, // 设置遮罩透明度
title: title, title: title, // 弹出层标题
content: url content: url // 弹出层内容 URL
}); });
if (full) { if (full) {
layer.full(index); layer.full(index); // 如果 full 为真，则全屏显示弹出层
} }
} }
/**
* [close 关闭弹出层] // 关闭弹出层方法
* @return {[type]} [description]
*/
Xadmin.prototype.close = function() { Xadmin.prototype.close = function() {
var index = parent.layer.getFrameIndex(window.name); var index = parent.layer.getFrameIndex(window.name); // 获取当前窗口索引
parent.layer.close(index); parent.layer.close(index); // 关闭弹出层
}; };
/**
* [close 关闭弹出层父窗口关闭] // 关闭弹出层并刷新父窗口方法
* @return {[type]} [description]
*/
Xadmin.prototype.father_reload = function() { Xadmin.prototype.father_reload = function() {
parent.location.reload(); parent.location.reload(); // 刷新父窗口
}; };
/**
* [get_data 获取所有项] // 获取所有标签页数据方法
* @return {[type]} [description]
*/
Xadmin.prototype.get_data = function() { Xadmin.prototype.get_data = function() {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义，则返回 false
return layui.data('tab_list') return layui.data('tab_list') // 从本地存储中获取标签页数据
} }
/**
* [set_data 增加某一项]
* @param {[type]} id [description]
*/
Xadmin.prototype.set_data = function(title,url,id) {
// 增加标签页数据方法
Xadmin.prototype.set_data = function(title, url, id) {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义，则不执行任何操作
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id, // 数据的键为标签页 ID
,value: {title:title,url:url} value: { title: title, url: url } // 数据的值为包含标题和 URL 的对象
}); });
}; };
/** // 获取分类数据方法
* [get_data 获取所有项]
* @return {[type]} [description]
*/
Xadmin.prototype.get_cate_data = function() { Xadmin.prototype.get_cate_data = function() {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义，则返回 false
return layui.data('cate') return layui.data('cate') // 从本地存储中获取分类数据
} }
/** /**
* [set_data 增加某一项] * 设置分类数据
* @param {[type]} id [description] * @param {Object} data - 要存储的数据对象
*/ */
Xadmin.prototype.set_cate_data = function(data) { Xadmin.prototype.set_cate_data = function(data) {
if (typeof is_remember !== "undefined")
if(typeof is_remember!="undefined")
return false; return false;
layui.data('cate', data); layui.data('cate', data);
}; };
/** /**
* [del_data 删除某一项] * 删除指定ID的数据
* @param {[type]} id [description] * @param {String} id - 要删除的数据的键值
* @return {[type]} [description]
*/ */
Xadmin.prototype.del_data = function(id) { Xadmin.prototype.del_data = function(id) {
if(typeof is_remember!="undefined") if (typeof is_remember !== "undefined")
return false; return false;
if(typeof id!="undefined"){
if (typeof id !== "undefined") {
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id,
,remove: true remove: true
}); });
} else { } else {
layui.data('tab_list', null); layui.data('tab_list', null);
} }
}; };
/** /**
* [del_other_data 删除其它] * 删除其他数据，只保留指定ID的数据
* @param {[type]} id [description] * @param {String} id - 要保留的数据的键值
* @return {[type]} [description]
*/ */
Xadmin.prototype.del_other_data = function(id) { Xadmin.prototype.del_other_data = function(id) {
if(typeof is_remember!="undefined") if (typeof is_remember !== "undefined")
return false; return false;
var tab_list = this.get_data(); var tab_list = this.get_data();
layui.data('tab_list', null); layui.data('tab_list', null);
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id,
,value: tab_list[id] value: tab_list[id]
}); });
}; };
// 初始化xadmin实例
win.xadmin = new Xadmin(); win.xadmin = new Xadmin();
}(window); }(window);
@ -199,7 +185,6 @@ layui.use(['layer','element','jquery'],function() {
element = layui.element; element = layui.element;
$ = layui.jquery; $ = layui.jquery;
// 打开页面初始 // 打开页面初始
xadmin.init(); xadmin.init();
@ -208,26 +193,24 @@ layui.use(['layer','element','jquery'],function() {
var id = $(this).parent().attr('lay-id'); var id = $(this).parent().attr('lay-id');
xadmin.del_data(id); xadmin.del_data(id);
}); });
//左侧菜单
$('.left-nav #nav').on('click', 'li', function(event) {
// 左侧菜单点击事件处理
$('.left-nav #nav').on('click', 'li', function(event) {
if ($(this).parent().attr('id') == 'nav') { if ($(this).parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f1',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f1', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({key:'f2',value:null}) xadmin.set_cate_data({ key: 'f2', value: null });
xadmin.set_cate_data({key:'f3',value:null}) xadmin.set_cate_data({ key: 'f3', value: null });
} }
if ($(this).parent().parent().parent().attr('id') == 'nav') { if ($(this).parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f2',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f2', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({key:'f3',value:null}) xadmin.set_cate_data({ key: 'f3', value: null });
} }
if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') { if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f3',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f3', value: $('.left-nav #nav li').index($(this)) });
} }
if ($('.left-nav').css('width') == '60px') { if ($('.left-nav').css('width') == '60px') {
$('.left-nav').animate({ width: '220px' }, 100); $('.left-nav').animate({ width: '220px' }, 100);
$('.page-content').animate({ left: '220px' }, 100); $('.page-content').animate({ left: '220px' }, 100);
@ -257,19 +240,21 @@ layui.use(['layer','element','jquery'],function() {
} }
} }
event.stopPropagation(); event.stopPropagation();
}) });
var left_tips_index = null; var left_tips_index = null;
$('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) { $('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) {
if ($('.left-nav').css('width') != '220px') { if ($('.left-nav').css('width') != '220px') {
var tips = $(this).attr('lay-tips'); var tips = $(this).attr('lay-tips');
left_tips_index = layer.tips(tips, $(this)); left_tips_index = layer.tips(tips, $(this));
} }
}) });
$('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) { $('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) {
layer.close(left_tips_index); layer.close(left_tips_index);
}) });
// 隐藏左侧
// 隐藏左侧导航栏
$('.container .left_open i').click(function(event) { $('.container .left_open i').click(function(event) {
if ($('.left-nav').css('width') == '220px') { if ($('.left-nav').css('width') == '220px') {
$('.left-nav .open').click(); $('.left-nav .open').click();
@ -339,8 +324,11 @@ layui.use(['layer','element','jquery'],function() {
* to work around bugs in some JS interpreters. * to work around bugs in some JS interpreters.
*/ */
function safeAdd (x, y) { function safeAdd (x, y) {
// 将 x 和 y 分别限制在 16 位，然后相加
var lsw = (x & 0xffff) + (y & 0xffff) var lsw = (x & 0xffff) + (y & 0xffff)
// 计算高位部分的和，并考虑低位部分可能产生的进位
var msw = (x >> 16) + (y >> 16) + (lsw >> 16) var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
// 返回合并后的 32 位结果
return (msw << 16) | (lsw & 0xffff) return (msw << 16) | (lsw & 0xffff)
} }
@ -348,6 +336,7 @@ return (msw << 16) | (lsw & 0xffff)
* Bitwise rotate a 32-bit number to the left. * Bitwise rotate a 32-bit number to the left.
*/ */
function bitRotateLeft (num, cnt) { function bitRotateLeft (num, cnt) {
// 使用位移操作实现循环左移
return (num << cnt) | (num >>> (32 - cnt)) return (num << cnt) | (num >>> (32 - cnt))
} }
@ -355,18 +344,23 @@ return (num << cnt) | (num >>> (32 - cnt))
* These functions implement the four basic operations the algorithm uses. * These functions implement the four basic operations the algorithm uses.
*/ */
function md5cmn (q, a, b, x, s, t) { function md5cmn (q, a, b, x, s, t) {
// 执行 MD5 算法中的一个基本操作
return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b) return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
} }
function md5ff (a, b, c, d, x, s, t) { function md5ff (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 F 函数操作
return md5cmn((b & c) | (~b & d), a, b, x, s, t) return md5cmn((b & c) | (~b & d), a, b, x, s, t)
} }
function md5gg (a, b, c, d, x, s, t) { function md5gg (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 G 函数操作
return md5cmn((b & d) | (c & ~d), a, b, x, s, t) return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
} }
function md5hh (a, b, c, d, x, s, t) { function md5hh (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 H 函数操作
return md5cmn(b ^ c ^ d, a, b, x, s, t) return md5cmn(b ^ c ^ d, a, b, x, s, t)
} }
function md5ii (a, b, c, d, x, s, t) { function md5ii (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 I 函数操作
return md5cmn(c ^ (b | ~d), a, b, x, s, t) return md5cmn(c ^ (b | ~d), a, b, x, s, t)
} }
@ -375,8 +369,10 @@ return md5cmn(c ^ (b | ~d), a, b, x, s, t)
*/ */
function binlMD5 (x, len) { function binlMD5 (x, len) {
/* append padding */ /* append padding */
// 添加填充数据，使数据长度满足要求
x[len >> 5] |= 0x80 << (len % 32) x[len >> 5] |= 0x80 << (len % 32)
x[((len + 64) >>> 9 << 4) + 14] = len // 添加原始数据长度信息（以位为单位）
x[(((len + 64) >>> 9) << 4) + 14] = len
var i var i
var olda var olda
@ -389,11 +385,13 @@ var c = -1732584194
var d = 271733878 var d = 271733878
for (i = 0; i < x.length; i += 16) { for (i = 0; i < x.length; i += 16) {
// 保存当前状态
olda = a olda = a
oldb = b oldb = b
oldc = c oldc = c
oldd = d oldd = d
// 执行 MD5 算法的主循环，处理每个块的数据
a = md5ff(a, b, c, d, x[i], 7, -680876936) a = md5ff(a, b, c, d, x[i], 7, -680876936)
d = md5ff(d, a, b, c, x[i + 1], 12, -389564586) d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
c = md5ff(c, d, a, b, x[i + 2], 17, 606105819) c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
@ -425,7 +423,7 @@ for (i = 0; i < x.length; i += 16) {
b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501) b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467) a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = md5gg(d, a, b, c, x[i + 2], 9, -51403784) d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473) c = md5gg(c, d, a, b, x[i + 7], 14, 173537119)
b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734) b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
a = md5hh(a, b, c, d, x[i + 5], 4, -378558) a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
@ -437,7 +435,7 @@ for (i = 0; i < x.length; i += 16) {
c = md5hh(c, d, a, b, x[i + 7], 16, -155497632) c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640) b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = md5hh(a, b, c, d, x[i + 13], 4, 681279174) a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
d = md5hh(d, a, b, c, x[i], 11, -358537222) d = md5hh(d, a, b, c, x[i + 0], 11, -358537222)
c = md5hh(c, d, a, b, x[i + 3], 16, -722521979) c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
b = md5hh(b, c, d, a, x[i + 6], 23, 76029189) b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
a = md5hh(a, b, c, d, x[i + 9], 4, -640364487) a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
@ -467,115 +465,124 @@ for (i = 0; i < x.length; i += 16) {
c = safeAdd(c, oldc) c = safeAdd(c, oldc)
d = safeAdd(d, oldd) d = safeAdd(d, oldd)
} }
return [a, b, c, d] return [a, b, c, d]
} }
/* /*
* Convert an array of little-endian words to a string * Convert an array of little-endian words to a string
*/ */
/*
* 将小端序的字数组转换为字符串
*/
function binl2rstr (input) { function binl2rstr (input) {
var i var i;
var output = '' var output = '';
var length32 = input.length * 32 var length32 = input.length * 32; // 计算输入数组的总位数
for (i = 0; i < length32; i += 8) { for (i = 0; i < length32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff) // 从输入数组中提取每个字节并转换为字符
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
} }
return output return output;
} }
/* /*
* Convert a raw string to an array of little-endian words * 将原始字符串转换为小端序的字数组
* Characters >255 have their high-byte silently ignored. * 字符值大于255的高字节将被忽略。
*/ */
function rstr2binl (input) { function rstr2binl (input) {
var i var i;
var output = [] var output = [];
output[(input.length >> 2) - 1] = undefined output[(input.length >> 2) - 1] = undefined; // 确保输出数组有足够的空间
for (i = 0; i < output.length; i += 1) { for (i = 0; i < output.length; i += 1) {
output[i] = 0 output[i] = 0; // 用零初始化输出数组
} }
var length8 = input.length * 8 var length8 = input.length * 8; // 计算输入字符串的总位数
for (i = 0; i < length8; i += 8) { for (i = 0; i < length8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32) // 将每个字符打包到输出数组中作为小端序字
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);
} }
return output return output;
} }
/* /*
* Calculate the MD5 of a raw string * 计算原始字符串的MD5哈希值
*/ */
function rstrMD5 (s) { function rstrMD5 (s) {
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)) return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)); // 将原始字符串转换为二进制，进行哈希运算，然后转换回原始字符串
} }
/* /*
* Calculate the HMAC-MD5, of a key and some data (raw strings) * 计算HMAC-MD5（密钥和数据）
*/ */
function rstrHMACMD5 (key, data) { function rstrHMACMD5 (key, data) {
var i var i;
var bkey = rstr2binl(key) var bkey = rstr2binl(key); // 将密钥转换为二进制数组
var ipad = [] var ipad = [];
var opad = [] var opad = [];
var hash var hash;
ipad[15] = opad[15] = undefined ipad[15] = opad[15] = undefined; // 确保ipad和opad数组有足够的空间
if (bkey.length > 16) { if (bkey.length > 16) {
bkey = binlMD5(bkey, key.length * 8) bkey = binlMD5(bkey, key.length * 8); // 如果密钥长度超过16个字，先对其进行哈希运算
} }
for (i = 0; i < 16; i += 1) { for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636 ipad[i] = bkey[i] ^ 0x36363636; // 使用ipad常量对密钥进行异或操作
opad[i] = bkey[i] ^ 0x5c5c5c5c opad[i] = bkey[i] ^ 0x5c5c5c5c; // 使用opad常量对密钥进行异或操作
} }
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8) hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8); // 对内填充的密钥和数据进行哈希运算
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)) return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)); // 对外填充的密钥和之前的哈希结果进行哈希运算，然后转换为原始字符串
} }
/* /*
* Convert a raw string to a hex string * 将原始字符串转换为十六进制字符串
*/ */
function rstr2hex (input) { function rstr2hex (input) {
var hexTab = '0123456789abcdef' var hexTab = '0123456789abcdef'; // 十六进制字符表
var output = '' var output = '';
var x var x;
var i var i;
for (i = 0; i < input.length; i += 1) { for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i) x = input.charCodeAt(i); // 获取每个字符的ASCII码
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f) output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f); // 将每个字符转换为其十六进制表示
} }
return output return output;
} }
/* /*
* Encode a string as utf-8 * 将字符串编码为UTF-8格式
*/ */
function str2rstrUTF8 (input) { function str2rstrUTF8 (input) {
return unescape(encodeURIComponent(input)) return unescape(encodeURIComponent(input)); // 将输入字符串编码为UTF-8格式
} }
/* /*
* Take string arguments and return either raw or hex encoded strings * 接受字符串参数并返回原始或十六进制编码的字符串
*/ */
function rawMD5 (s) { function rawMD5 (s) {
return rstrMD5(str2rstrUTF8(s)) return rstrMD5(str2rstrUTF8(s)); // 将输入字符串转换为原始格式并计算其MD5哈希值
} }
function hexMD5 (s) { function hexMD5 (s) {
return rstr2hex(rawMD5(s)) return rstr2hex(rawMD5(s)); // 将输入字符串转换为原始格式，计算其MD5哈希值，然后转换为十六进制格式
} }
function rawHMACMD5 (k, d) { function rawHMACMD5 (k, d) {
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)) return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)); // 将密钥和数据转换为原始格式，计算它们的HMAC-MD5哈希值，并返回原始结果
} }
function hexHMACMD5 (k, d) { function hexHMACMD5 (k, d) {
return rstr2hex(rawHMACMD5(k, d)) return rstr2hex(rawHMACMD5(k, d)); // 将密钥和数据转换为原始格式，计算它们的HMAC-MD5哈希值，转换为十六进制格式，并返回十六进制结果
} }
/*
* 根据提供的参数计算MD5或HMAC-MD5的主函数
*/
function md5 (string, key, raw) { function md5 (string, key, raw) {
if (!key) { if (!key) { // 如果没有提供密钥，计算输入字符串的MD5哈希值
if (!raw) { if (!raw) {
return hexMD5(string) return hexMD5(string); // 返回十六进制编码的MD5哈希值
} }
return rawMD5(string) return rawMD5(string); // 返回原始MD5哈希值
} }
if (!raw) { if (!raw) { // 如果提供了密钥，使用密钥计算输入字符串的HMAC-MD5哈希值
return hexHMACMD5(key, string) return hexHMACMD5(key, string); // 返回十六进制编码的HMAC-MD5哈希值
} }
return rawHMACMD5(key, string) return rawHMACMD5(key, string);
} }
Write Preview
Loading…
Cancel
Save