layui实现班级学生管理页面-(2)学生管理页面

最新推荐文章于 2024-03-04 19:30:58 发布

没事瞎琢磨的程序猿

最新推荐文章于 2024-03-04 19:30:58 发布

阅读量2.0k

点赞数 1

文章标签： layui 学生

本文链接：https://blog.csdn.net/qq_38759137/article/details/96480259

版权

HTML代码

studentManage.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>学生信息管理界面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="pages/manage.css">
  </head>
  
  <body>
 	 <script src="layui/layui.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="pages/studentManage.js"></script>
    <script type="text/javascript">
    	function remove(id){
		//弹出确认提示框
		if(confirm("确定删除该学员信息吗?")){
			location.href="removeStudentById.do?id="+id;
		}
};
    </script>
    
    <div class="div-table">
    	<div>
			<button type="button" class="layui-btn" id="importExcel">导入Excel文件</button>
			<button type="button" class="layui-btn" id="exportExcel"><a href="OutputExcel.do" style="color: white;">导出Excel文件</a></button>
		</div>
		<div style="height: 10px;"></div>
    	<div>
    		<button style="float: left;" type="button" class="layui-btn" onclick="turnToStudentAdd()">
 		 <i class="layui-icon">&#xe608;</i> 添加
		</button>
		<input type="text" id="studentName" autocomplete="off" class="layui-input" style="float:left;width:230px;margin-left: 20px;">
		<button style="float:left;" class="layui-btn" onclick="change()">学员名称查询</button>
		<label class="layui-bg-green" style="float:left;margin-left: 20px;font-size: 10pt;padding: 10px;">性别</label>
		<div style="float: left;" class="layui-input-inline">
      		<select onchange="change()" style="width: 80px;height: 36px;" id="sexSelect">
      			<option value="-1">--请选择--</option>
      			<option value="1">男</option>
      			<option value="0">女</option>
      		</select>
    	</div>
		<label class="layui-bg-green" style="float:left;margin-left: 20px;font-size: 10pt;padding: 10px;">所属班级</label>
		<div style="float: left;" class="layui-input-inline">
      		<select onchange="change()" style="width: 100px;height: 36px;" id="classSelect">
      		</select>
    	</div>
    	</div>
    	<div style="margin-top: 40px;"><table class="layui-table" lay-skin="line">
		  <colgroup>
		    <col width="150">
		    <col width="200">
		    <col width="200">
		    <col width="200">
		    <col width="200">
		    <col width="200">
		  </colgroup>
		  <thead>
		    <tr>
		      <th>学号</th>
		      <th>学员姓名</th>
		      <th>学员性别</th>
		      <th>学员电话</th>
		      <th>所属班级</th>
		      <th>操作</th>
		    </tr> 
		  </thead>
		  <tbody id="studentList">
		  <c:forEach items="${studentList }" var="studentBean">
		  	<tr>
		      <td>${studentBean.number }</td>
		      <td>${studentBean.name }</td>
			  <td>${studentBean.sex==1?'男':'女' }</td>
		      <td>${studentBean.phone }</td>
		      <td>${studentBean.className }</td>
		      <td><a href="turnToModify.do?number=${studentBean.number }"> <i class="layui-icon layui-icon-edit" style="font-size: 30px; color: #1E9FFF;"></i></a>
		       <a href="javascript:;" onclick="remove(${studentBean.id })"> <i class="layui-icon layui-icon-delete" style="font-size: 30px; color: #1E9FFF;"></i></a>
		      </td>
		    </tr>
		  </c:forEach>
		    
		  </tbody>
		</table></div>
		<div id="page"></div>
    </div>
    
  </body>
</html>

studentManage.js

$(function(){
	$.ajax({
	    url:'queryClassAll.do',
	    type:'post',
	    dataType:'json',
	    async:false,
	    success:function(result){
	    	var strHtml = "<option value='0'>--请选择--</option>";
	    	for(var i in result){
	    		strHtml += "<option value='"+ result[i].id +"'>"+ result[i].name +"</option>";
	    	}
	    	$("#classSelect").html(strHtml);
	    },
	});
	layui.use('upload', function(){
        debugger;
        var $ = layui.jquery
            ,upload = layui.upload;
        upload.render({
            elem: '#importExcel'
            ,url: 'InputExcel.do'
            ,accept: 'file' //普通文件
            ,multiple: true
            ,exts: 'xls|xlsx' //允许上传的文件后缀
            ,done: function(res){//返回值接收
        		layer.msg('导入成功!');
            }
        });

    });
	
});
function change(){
	var className = $("#classSelect").val();
	var studentName = $("#studentName").val();
	var sex = $("#sexSelect").val();
	layui.use('laypage', function(){
		  var laypage = layui.laypage;
		  //从服务端获取数据总数
		  var totalCounts = getCount(studentName,sex,className);
		  //执行一个laypage实例
		  laypage.render({
		    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
		    ,count: totalCounts //数据总数，从服务端得到
		    ,curr: 1
		    ,jump: function(obj, first){
		        //obj包含了当前分页的所有参数，比如：
		        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		        console.log(obj.limit); //得到每页显示的条数
		        //首次不执行
		        if(!first){
		        	
		        }
		      }
		  });
		});
	 $.ajax({
		    url:'queryStudentByCondition.do',
		    type:'post',
		    data:'ignoreCount='+0+'&limitCount='+10
		    	+'&studentName='+studentName
		    	+'&sex='+sex
		    	+'&className='+className,
		    dataType:'json',
		    async: false,
		    success:function(result){
		    	var strHtml = "";
		    	for(var i in result){
		    		strHtml += "<tr>";
		    		strHtml += "<td>" + result[i].number + "</td>";
		    		strHtml += "<td>" + result[i].name + "</td>";
		    		strHtml += "<td>" + (result[i].sex==1?'男':'女') + "</td>";
		    		strHtml += "<td>" + result[i].phone + "</td>";
		    		strHtml += "<td>" + result[i].className + "</td>";
		    		strHtml += "<td><a href='turnToModify.do?number="+result[i].number+"'> <i class='layui-icon layui-icon-edit' style='font-size: 30px; color: #1E9FFF;'></i></a>" +
		    				"<a href='javascript:;' onclick='remove("+result[i].id+")'> <i class='layui-icon layui-icon-delete' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
		    		strHtml += "</tr>";
		    	}
		    	$("#studentList").html(strHtml);
		    },
		});
}
function turnToStudentAdd(){
	location.href="pages/studentAdd.jsp";
};
function getCount(studentName,sex,className){
	//初始化
	var num = 0;
	if(sex == null){
		sex = -1;
	}
	if(className == null){
		className = 0;
	}
	$.ajax({
	    url:'queryStudentCount.do',
	    type:'post',
	    data:+'studentName='+studentName
		    	+'&sex='+sex
		    	+'&className='+className,
	    dataType:'text',
	    async: false,
	    success:function(data){
	    	num = data;
	    },
	});
	return num;
};
layui.use('laypage', function(){
	  var laypage = layui.laypage;
	  var className = $("#classSelect").val();
	  var studentName = $("#studentName").val();
	  var sex = $("#sexSelect").val();
	  //从服务端获取数据总数
	  var totalCounts = getCount(studentName,-1,0);
	  //执行一个laypage实例
	  laypage.render({
	    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
	    ,count: totalCounts //数据总数，从服务端得到
	    ,jump: function(obj, first){
	        //obj包含了当前分页的所有参数，比如：
	        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	        console.log(obj.limit); //得到每页显示的条数
	        var ignoreCount = (obj.curr-1)*obj.limit;
	        //首次不执行
	        if(!first){
	        	 $.ajax({
	        		    url:'queryStudentAjax.do',
	        		    type:'post',
	        		    data:'ignoreCount='+ignoreCount+'&limitCount='+obj.limit
			        		    +'&studentName='+studentName
		        		    	+'&sex='+sex
		        		    	+'&className='+className,
	        		    dataType:'json',
	        		    async: false,
	        		    success:function(result){
	        		    	var strHtml = "";
	        		    	for(var i in result){
	        		    		strHtml += "<tr>";
	        		    		strHtml += "<td>" + result[i].number + "</td>";
	        		    		strHtml += "<td>" + result[i].name + "</td>";
	        		    		strHtml += "<td>" + (result[i].sex==1?'男':'女') + "</td>";
	        		    		strHtml += "<td>" + result[i].phone + "</td>";
	        		    		strHtml += "<td>" + result[i].className + "</td>";
	        		    		strHtml += "<td><a href='turnToModify.do?number="+result[i].number+"'> <i class='layui-icon layui-icon-edit' style='font-size: 30px; color: #1E9FFF;'></i></a>" +
	        		    				"<a href='javascript:;' onclick='remove("+result[i].id+")'> <i class='layui-icon layui-icon-delete' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
	        		    		strHtml += "</tr>";
	        		    	}
	        		    	$("#studentList").html(strHtml);
	        		    },
	        		});
	        }
	      }
	  });
	});

StudentController.java

package com.sg.xujun.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.sg.xujun.model.StudentBean;
import com.sg.xujun.service.StudentService;

@Controller
public class StudentController {
	
	private Logger log = Logger.getLogger(this.getClass());
	
	@Autowired
	private StudentService studentService;
	
	/**
	 * ajax校验学号是否重复
	 * @param number
	 * @return
	 */
	@RequestMapping(value="/queryStudentByNumber.do",produces="text/plain;charset=UTF-8")
	@ResponseBody
	public String queryStudentByNumber(String number){
		log.info("ajax校验学号是否重复开始");
		log.info("ajax校验学号是否重复,学号:" + number);
		String result = "error";
		StudentBean studentBean = studentService.queryStudentByNumber(number);
		if (studentBean == null) {
			result = "success";
		}
		log.info("ajax校验学号是否重复结束");
		return result;
	}
	/**
	 * 添加学员信息
	 * @param studentBean
	 * @return
	 */
	@RequestMapping("/addStudent.do")
	public String addStudent(StudentBean studentBean){
		log.info("添加学员信息开始");
		log.info("添加的学员信息:"+studentBean.toString());
		studentService.addStudent(studentBean);
		log.info("添加学员信息结束");
		return "queryStudent.do";
	}
	/**
	 * 分页获取所有的学员信息
	 * @return
	 */
	@RequestMapping("/queryStudent.do")
	public String queryStudent(Integer ignoreCount,Integer limitCount,String studentName,
			Integer sex,Integer className,ModelMap modelMap){
		log.info("分页获取所有的学员信息开始");
		if (ignoreCount == null) {
			ignoreCount = 0;
		}
		if (limitCount == null) {
			limitCount = 10;
		}
		sex = -1;
		className = 0;
		log.info("分页获取所有的学员信息,学员名称："+studentName+",性别："+sex+",班级ID："+className);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("ignoreCount",ignoreCount);
		map.put("limitCount",limitCount);
		map.put("studentName",studentName);
		map.put("sex",sex);
		map.put("className",className);
		List<StudentBean> studentList = studentService.queryStudent(map);
		modelMap.addAttribute("studentList",studentList);
		log.info("分页获取所有的学员信息结束");
		return "/pages/studentManage.jsp";
	}
	/**
	 * 获取学员信息总数
	 * @return
	 */
	@RequestMapping("/queryStudentCount.do")
	@ResponseBody
	public Integer getStudentCount(String studentName,String sex,String className){
		log.info("测试数据,学员名称："+studentName+",性别："+sex+",班级ID："+className);
		if (sex == null || "".equals(sex) || "null".equals(sex)) {
			sex = "-1";
		}
		if (className == null || "".equals(className) || "null".equals(className)) {
			className = "0";
		}
		log.info("获取学员信息总数开始");
		log.info("获取学员信息总数,条件学员名称:"+studentName+",性别："+sex+",班级ID:"+className);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("studentName",studentName);
		map.put("sex",Integer.valueOf(sex));
		map.put("className",Integer.valueOf(className));
		int num = studentService.queryCount(map);
		log.info("获取学员信息总数结束");
		return num;
	}
	/**
	 * ajax分页获取所有的学员信息
	 * @param ignoreCount
	 * @param limitCount
	 * @return
	 */
	@RequestMapping("/queryStudentAjax.do")
	@ResponseBody
	public List<StudentBean> queryStudentAjax(Integer ignoreCount,Integer limitCount){
		log.info("ajax分页获取所有的学员信息开始");
		log.info("ajax分页获取所有的学员信息,跳过"+ignoreCount+"条数据,显示"+limitCount+"条数据");
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("ignoreCount",ignoreCount);
		map.put("limitCount",limitCount);
		List<StudentBean> studentList = studentService.queryStudent(map);
		log.info("ajax分页获取所有的学员信息结束");
		return studentList;
	}
	/**
	 * 根据学员ID获取该学员信息
	 * @param id
	 * @param modelMap
	 * @return
	 */
	@RequestMapping("/turnToModify.do")
	public String turnToModify(String number,ModelMap modelMap){
		log.info("根据学号获取学员信息开始");
		log.info("根据学号:"+number+"获取该学员信息");
		StudentBean studentBean = studentService.queryStudentByNumber(number);
		log.info("查询的学员信息:"+studentBean.toString());
		modelMap.addAttribute("studentBean", studentBean);
		log.info("根据学号获取学员信息结束");
		return "/pages/studentEdit.jsp";
	}
	/**
	 * 修改学员信息
	 * @param studentBean
	 * @return
	 */
	@RequestMapping("/modifyStudent.do")
	public String modifyStudent(StudentBean studentBean){
		log.info("修改学员信息开始");
		log.info("修改学员的信息:"+studentBean.toString());
		studentService.modifyStudent(studentBean);
		log.info("修改学员信息结束");
		return "queryStudent.do";
	}
	/**
	 * 根据学员ID删除学员信息
	 * @param id
	 * @return
	 */
	@RequestMapping("/removeStudentById.do")
	public String removeStudentById(Integer id){
		log.info("删除学员信息开始");
		log.info("根据学员ID:"+id+"删除学员信息");
		studentService.removeStudent(id);
		log.info("删除学员信息结束");
		return "queryStudent.do";
	}
	/**
	 * 按条件分页获取所有的学员信息
	 * @param ignoreCount
	 * @param limitCount
	 * @param studentName
	 * @param sex
	 * @param className
	 * @return
	 */
	@RequestMapping("/queryStudentByCondition.do")
	@ResponseBody
	public List<StudentBean> queryStudentByCondition(Integer ignoreCount,Integer limitCount,String studentName,
			Integer sex,Integer className){
		log.info("按条件分页获取所有的学员信息开始");
		log.info("按条件分页获取所有的学员信息,条件学员名称:"+studentName+",性别："+sex+",班级ID:"+className);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("ignoreCount",ignoreCount);
		map.put("limitCount",limitCount);
		map.put("studentName",studentName);
		map.put("sex",sex);
		map.put("className",className);
		List<StudentBean> studentList = studentService.queryStudent(map);
		log.info("按条件分页获取所有的学员信息结束");
		return studentList;
	}
}

layui实现班级学生管理页面-(1)班级管理以及使用echarts图形统计

班级学生管理源码下载

没事瞎琢磨的程序猿

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
layui实现班级学生管理页面-(2)学生管理页面

HTML代码studentManage.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@taglib uri="http...
复制链接

扫一扫