sgms_html
/
gradeList.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>学生信息管理</title>
	<link rel="stylesheet" href="./layer/theme/default/layer.css">
	<link rel="stylesheet" type="text/css" href="./css/reponse.css">
	<link rel="stylesheet" type="text/css" href="./css/lib/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/custom.css">
	<style type="text/css">
		.alertceng{
			background: #FFFFFF;
			padding: 10px;
			display: none;
		}
		.alertceng span.title{
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div class="layui-fluid layadmin-homepage-fluid" style="background: #fff;width:90%;margin:0 auto;">
		<div id="page">
			<h1>学生成绩信息管理</h1>
			<table id="table" class="reponsetable" ></table>
			<script type="text/html" id="editer">
				<a class="layui-btn layui-btn-xs" onclick="edittr(this)">修改</a>
		 		<a class="layui-btn layui-btn-xs" onclick="deletetr(this)">删除</a>
				<a class="layui-btn layui-btn-xs" onclick="uptr(this)">上移</a>
				<a class="layui-btn layui-btn-xs" onclick="downtr(this)">下移</a>
		    </script>
		    <div class="btn-container">
				<button class="layui-btn" onclick="addNew();">新增信息</button>
			</div>
			<form class="form-horizontal" id="input_form" onsubmit="return submitInfo();">
				<fieldset>
					<!-- Form Name -->
					<legend>学生信息录入</legend>

					<!-- Multiple Radios (inline) -->
					<div class="control-group">
  							<label class="control-label" for="">专业</label>
  							<div class="controls">
    							<label class="radio inline" for="multipleradiosinline-0-0">
      								<input type="radio" name="radio_major" id="radio_computer" value="1" checked="checked">
      								计算机
    							</label>
    							<label class="radio inline" for="multipleradiosinline-0-1">
      								<input type="radio" name="radio_major" id="radio_iot" value="2">
      								物联网
    							</label>
    							<label class="radio inline" for="multipleradiosinline-0-2">
      								<input type="radio" name="radio_major" id="radio_tongxin" value="3">
      								通信
    							</label>
  							</div>
					</div>

					<!-- Select Basic -->
					<div class="control-group">
  							<label class="control-label" for="selectbasic-0">年级</label>
  							<div class="controls">
    							<select id="select_grade" name="selectbasic-0" class="input-xlarge">
      								<option>2015</option>
      								<option>2016</option>
      								<option>2017</option>
      								<option>2018</option>
      								<option>2019</option>
    							</select>
  							</div>
					</div>

					<!-- Text input-->
					<div class="control-group">
  							<label class="control-label" for="textinput-1">学号</label>
  							<div class="controls">
    							<input id="input_id" name="input_id" type="text" class="input-xlarge" placeholder="student id" onblur="return checkId();">
    							<label id="idNumWarn"> </label>
  							</div>
					</div>

					<!-- Text input-->
					<div class="control-group">
  							<label class="control-label" for="textinput-2">姓名</label>
  							<div class="controls">
    							<input id="input_name" name="input_name" type="text" placeholder="student name" class="input-xlarge" onblur="return checkName();">
    							<label id="nameWarn"> </label>
  							</div>
					</div>

					<!-- Multiple Radios (inline) -->
					<div class="control-group">
  							<label class="control-label" for="">性别</label>
  							<div class="controls">
    							<label class="radio inline" for="multipleradiosinline-2-0">
      								<input type="radio" name="radio_sex" id="radio_man" value="1" checked="checked">
      								男
    							</label>
    							<label class="radio inline" for="multipleradiosinline-2-0">
      								<input type="radio" name="radio_sex" id="radio_women" value="2">
      								女
    							</label>
  							</div>
					</div>

					<!-- Multiple Radios (inline) -->
					<div class="control-group">
  							<label class="control-label" for="">科目</label>
  							<div class="controls">
    							<label class="radio inline" for="multipleradiosinline-2-0">
      								<input type="radio" name="radio_subject" id="radio_ds" value="1" checked="checked">
      								数据结构
    							</label>
    							<label class="radio inline" for="multipleradiosinline-2-0">
      								<input type="radio" name="radio_subject" id="radio_c" value="2">
      								c语言程序设计
    							</label>
    							<label class="radio inline" for="multipleradiosinline-2-0">
      								<input type="radio" name="radio_subject" id="radio_java" value="3">
      								java语言程序设计
    							</label>
  							</div>
					</div>

					<!-- Text input-->
					<div class="control-group">
  							<label class="control-label" for="textinput-3">成绩</label>
  							<div class="controls">
    							<input id="input_score" name="input_score" type="text" placeholder="score <=100" class="input-xlarge" onblur="return checkScore();">
    							<label id="scoreWarn"> </label>
  							</div>
					</div>

				</fieldset>
				<div class="btn-container" style="display:none" id="btn_edit">
					<button class="layui-btn" onclick="return editInfo();">确认修改</button>
				</div>
				<div class="btn-container" style="display:block" id="btn_add">
					<button class="layui-btn" type="submit" >提交</button>
				</div>
			</form>

			<legend>学生信息查询</legend>
			<div class="control-group">
  				<div class="controls">
    				<input id="input_search" name="input_search" type="text" class="input-xlarge" placeholder="search" onblur="return checkSearch();">
    				<label id="searchWarn"> </label>
    				<button class="layui-btn" id="searchById" onclick="return searchById();">学号/姓名查询</button>
            		<button class="layui-btn" id="searchBySubject" onclick="return searchBySubject();">科目查询</button>
            		<button class="layui-btn" id="searchByScore" onclick="return searchByScore();">成绩(范围)查询</button>
  				</div>
			</div>
			<table id="search_table" class="reponsetable" ></table>
			<legend><h6>©copyright  NH4L</h6></legend>
		</div>
	</div>
	<div id="editcontent" class="alertceng">
			<p><span class="title">专业:</span><input type="text" id="major"/></p>
			<p><span class="title">年级:</span><input type="text" id="grade"/></p>
			<p><span class="title">学号:</span><input type="text" id="id"/></p>
			<p><span class="title">姓名:</span><input type="text" id="name"/></p>
			<p><span class="title">性别:</span><input type="text" id="sex"/></p>
			<p><span class="title">科目:</span><input type="text" id="subject"/></p>
			<p><span class="title">成绩:</span><input type="text" id="score"/></p>
	</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/jquery.basictable.min.js"></script>
<script type="text/javascript" src="./js/reponsetable.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
	$(function(){				//原始数据，json构建
		$('#table').basictable({
			breakpoint: 768
		});
		$("#table").reponsetable({
			"id":"table",
			"operation": "editer",
			"type":"numbers",
			"colum": [
				{"field": "major","title": "专业"},
				{"field": "grade","title": "年级"},
				{"field": "id","title": "学号"},
				{"field": "name","title": "姓名"},
				{"field": "sex","title": "性别"},
				{"field": "subject","title": "科目"},
				{"field": "score","title": "成绩"}
			],
			"data": [
				{"major": "计算机","grade": "2018","id": 1862801,"name": "张三","sex": "男", "subject": "数据结构", "score": 98},
				{"major": "物联网","grade": "2017","id": 1762402,"name": "李四","sex": "女", "subject": "c语言程序设计", "score": 85},
				{"major": "通信","grade": "2017","id": 1762303,"name": "王五","sex": "男", "subject": "java语言程序设计", "score": 70}
			]
		});

		$('#search_table').basictable({
			breakpoint: 768
		});
		$("#search_table").reponsetable({
			"id":"search_table",
			"operation": "editer",
			"type":"numbers",
			"colum": [
				{"field": "major","title": "专业"},
				{"field": "grade","title": "年级"},
				{"field": "id","title": "学号"},
				{"field": "name","title": "姓名"},
				{"field": "sex","title": "性别"},
				{"field": "subject","title": "科目"},
				{"field": "score","title": "成绩"}
			],
			"data": []
		});
	})

    function checkId() {//检查学号是否合适
    	var id = $("#input_id").val()
    	console.log("aaa")
    	var pattern=/^\d{7}$/;
        if(id == "" || id == null) {
            $("#idNumWarn").html("学号不能为空！");
            return false;
        } else if (!checkIdReg(id)) {
            $("#idNumWarn").html("学号必须为7为数字！");
            return false;
        } else {
        	$("#idNumWarn").html("");
        	return true;
        }
    }

    function checkName() {//检查姓名是否合适
    	var name = $("#input_name").val()
        if(name == "" || name == null) {
            $("#nameWarn").html("姓名不能为空！")
            return false;
        } else if (!checkNameReg(name)) {
        	$("#nameWarn").html("姓名必须为2-4个汉字")
            return false;
        } else {
        	$("#nameWarn").html("")
        	return true
        }
    }

    function checkScore() {//检查分数是否合适
    	var score = $("#input_score").val()
        if(score == "" || score == null) {
            $("#scoreWarn").html("分数不能为空！")
            return false;
        } else if (!checkScoreReg(score)) {
        	$("#scoreWarn").html("分数必须是0-100！")
            return false;
        } else {
        	$("#scoreWarn").html("")
        	return true
        }
    }

    function checkIdReg(theObj) {//正则判断学号是否合格
  		var reg = /^\d{7}$/;
  		if (reg.test(theObj)) {
   			return true;
  		}
  		return false;
	}

	function checkNameReg(theObj) {//正则判断姓名是否合格
  		var reg = /^[\u4e00-\u9fa5]{2,4}$/;
  		if (reg.test(theObj)) {
   			return true;
  		}
  		return false;
	}

	function checkScoreReg(theObj) {//正则判断分数是否合格
  		var reg = /^[0-9]+.?[0-9]*$/;
  		if (reg.test(theObj)) {
  			if ((parseInt(theObj) <= 100) && (parseInt(theObj) >= 0)) {
  				return true;
  			}
  		}
  		return false;
	}

	function checkSearchScoreReg(theObj) {//正则判断分数范围是否合格
  		var reg = /^[0-9]+.?[0-9]*$/;
  		if ((theObj.indexOf("-") > -1) && ((theObj.split('-')).length-1 == 1)) {
  			var scores = theObj.split('-');
  			console.log(scores)
  			if (parseInt(scores[0]) > (parseInt(scores[1]))) {
  				return false;
  			} else {
  				if (reg.test(scores[0])) {
  					if ((parseInt(scores[0]) <= 100) && (parseInt(scores[0]) >= 0)) {
  						if (reg.test(scores[1])) {
  							if ((parseInt(scores[1]) <= 100) && (parseInt(scores[1]) >= 0)) {
  								return true;
  							}
  						}
  					}
  				}
  			}

  		}

  		return false;
	}

	function submitInfo() {//提交表单信息，表中有的所有信息的判定如上方法
		if ((!checkId()) || (!checkName()) || (!checkScore())) {
			return false
		}
		var major;
		var majorValue = $('input:radio[name="radio_major"]:checked').val()
		if (majorValue==1) {
			major = "计算机";
		} else if (majorValue==2) {
			major = "物联网";
		} else {
			major = "通信";
		};

		var grade = $("#select_grade option:selected").text()
		var id = $("#input_id").val()
	    var name = $("#input_name").val()

		var sex;
	    var sexValue = $('input:radio[name="radio_sex"]:checked').val()
		if (sexValue==1) {
			sex = "男";
		} else {
			sex = "女";
		};

		var subject;
		var subjectValue = $('input:radio[name="radio_subject"]:checked').val()
		if (subjectValue==1) {
			subject = "数据结构";
		} else if (subjectValue==2) {
			subject = "c语言程序设计";
		} else {
			subject = "java语言程序设计";
		}

		var score = $("#input_score").val()

		var obj = {
				"major":major,
			  	"grade": grade,
			  	"id": id,
			  	"name": name,
			  	"sex": sex,
				"subject":subject,
				"score":score
			  };

		var idSubject = getData();
		var inputIdSubject = id + "_" + subject;
		if (idSubject.indexOf(inputIdSubject)>=0) {
			alert("学号和科目重复，请重新填写！")
			return false;
		} else {
			reponse.addtr(obj, "table");
			return false;
		}

		return false;
	}

	function getData() {		//获取所有的学号+科目的信息，并形成一个数组返回
		var ids = reponse.Columndata("id", "table");
		var subjects = reponse.Columndata("subject", "table")
		var obj = []
		for (var i = 0; i < ids.length; i++) {
			obj.push(ids[i] + "_" + subjects[i])
		};
		console.log(obj);
		return obj;
	}

	function edittr(a, e) {//修改 ：将原来新重新写入表单
		//转换修改按钮和确认提交表单按钮，一个表示修改信息，一个表示提交表单
		document.getElementById("btn_edit").style.display = "block";
        document.getElementById("btn_add").style.display = "none";

		var tr = $(a).parent().parent();
		reponse.resiverowdata(tr, "table");
		var rowdata=$("#table").data("rowdata");
		//alert(JSON.stringify(rowdata));

		var edit_major = rowdata["major"];
		if (edit_major=="计算机") {
			$("#radio_computer").attr("checked","checked");
			$("#radio_iot").removeAttr("checked");
			$("#radio_tongxin").removeAttr("checked");
		} else if (edit_major=="物联网") {
			$("#radio_iot").attr("checked","checked");
			$("#radio_computer").removeAttr("checked");
			$("#radio_tongxin").removeAttr("checked");
		} else if (edit_major=="通信") {
			$("#radio_tongxin").attr("checked","checked");
			$("#radio_computer").removeAttr("checked");
			$("#radio_iot").removeAttr("checked");
		};

		var edit_grade = rowdata["grade"];
		$("#select_grade option:selected").text(edit_grade);

		var edit_id = rowdata["id"];
		$('#input_id').attr('value', edit_id);

		var edit_name = rowdata["name"];
		$('#input_name').attr('value', edit_name);

		var edit_sex = rowdata["sex"];
		if (edit_sex=="男") {
			$("#radio_man").attr("checked","checked");
			$("#radio_women").removeAttr("checked");
		} else {
			$("#radio_women").attr("checked","checked");
			$("#radio_man").removeAttr("checked");
		}

		var edit_subject = rowdata["subject"];
		if (edit_major=="数据结构") {
			$("#radio_ds").attr("checked","checked");
			$("#radio_java").removeAttr("checked");
			$("#radio_c").removeAttr("checked");
		} else if (edit_major=="c语言程序设计") {
			$("#radio_c").attr("checked","checked");
			$("#radio_ds").removeAttr("checked");
			$("#radio_java").removeAttr("checked");
		} else if (edit_major=="java语言程序设计") {
			$("#radio_java").attr("checked","checked");
			$("#radio_ds").removeAttr("checked");
			$("#radio_c").removeAttr("checked");
		};

		var edit_score = rowdata["score"];
		$('#input_score').attr('value', edit_score);


		// layer.open({
		//   type: 1,
		//   title: '编辑人员信息',
		//   closeBtn: 1,
		//   area: '516px',
		//   skin: '#fff', //没有背景色
		//   shadeClose: true,
		//   content: $('#editcontent'),
		//   btn:["保存","关闭"],
		//   btn1:function(index,layero){
		// 	  var major=$("#major").val();
		// 	  var grade=$("#grade").val();
		// 	  var id=$("#id").val();
		// 	  var name=$("#name").val();
		// 	  var sex=$("#sex").val();
		// 	  var subject=$("#subject").val();
		// 	  var score=$("#score").val();
		// 	  var obj = {
		// 		"major":major,
		// 	  	"grade": grade,
		// 	  	"id": id,
		// 	  	"name": name,
		// 	  	"sex": sex,
		// 		"subject":subject,
		// 		"score":score
		// 	  };
		// 	  reponse.editsavetr(obj, "table");
		// 	  layer.close(index);
		//   },btn2:function(index,layero){
		// 	  layer.close(index);
		//   }
		// });
	}

	function editInfo() {//编辑信息，只修改信息，不会新增一行到表中
		var major;
		var majorValue = $('input:radio[name="radio_major"]:checked').val()
		if (majorValue==1) {
			major = "计算机";
		} else if (majorValue==2) {
			major = "物联网";
		} else {
			major = "通信";
		};

		var grade = $("#select_grade option:selected").text()
		var id = $("#input_id").val()
	    var name = $("#input_name").val()

		var sex;
	    var sexValue = $('input:radio[name="radio_sex"]:checked').val()
		if (sexValue==1) {
			sex = "男";
		} else {
			sex = "女";
		};

		var subject;
		var subjectValue = $('input:radio[name="radio_subject"]:checked').val()
		if (subjectValue==1) {
			subject = "数据结构";
		} else if (subjectValue==2) {
			subject = "c语言程序设计";
		} else {
			subject = "java语言程序设计";
		}

		var score = $("#input_score").val()

		var obj = {
				"major":major,
			  	"grade": grade,
			  	"id": id,
			  	"name": name,
			  	"sex": sex,
				"subject":subject,
				"score":score
			  };

		if (checkId() && checkName() && checkScore()) {
			reponse.editsavetr(obj, "table");
		};
		//修改完成后提交按转换回来
		document.getElementById("btn_edit").style.display = "none";
        document.getElementById("btn_add").style.display = "block";
		return false;
	}

	function addNew() {//清空表单中的信息
		$('#input_id').attr('value', " ");
		$('#input_name').attr('value', " ");
		$('#input_score').attr('value', " ");
	}

	function checkSearch() {		//检查搜索输入框是否符合
		var input_search = $("#input_search").val()
        if(input_search == "" || input_search == null) {
            $("#searchWarn").html("查询字段不能为空！")
            return false;
        } else {
        	$("#searchWarn").html("")
        	return true;
        }
	}

	function checkSearchScore() {		//检查成绩输入格式是否合格
		var input_search = $("#input_search").val()
        if(input_search == "" || input_search == null) {
            $("#searchWarn").html("查询字段不能为空！")
            return false;
        } else if (!checkSearchScoreReg(input_search)) {
        	$("#searchWarn").html("分数查询格式必须为：xx-xx 且左小右大！")
            return false;
        } else {
        	$("#searchWarn").html("")
        	return true
        }
	}

	function getTableData() {		//获取表格中的数据
		var majors = reponse.Columndata("major", "table");
		var grades = reponse.Columndata("grade", "table");
		var ids = reponse.Columndata("id", "table");
		var names = reponse.Columndata("name", "table");
		var sexs = reponse.Columndata("sex", "table");
		var subjects = reponse.Columndata("subject", "table");
		var scores = reponse.Columndata("score", "table");
		var obj = []
		for (var i = 0; i < ids.length; i++) {
			var obj_json = {
				"major":majors[i],
			  	"grade": grades[i],
			  	"id": ids[i],
			  	"name": names[i],
			  	"sex": sexs[i],
				"subject":subjects[i],
				"score":scores[i]
			  };
			obj.push(obj_json)
		};
		return obj;		//获取表中所有的数据				//获取表中所有的数据
	}

	function searchById() {	//根据学号和姓名查询
		$("#search_table  tr:not(:first)").html("");
		if (!checkSearch()) {
			return false;
		}
		var input_search = $("#input_search").val();
		var names = reponse.Columndata("name", "table");
		var ids = reponse.Columndata("id", "table");
		var res = getTableData();
		if (ids.indexOf(input_search)>=0) {
			for (var i = 0; i < res.length; i++) {
				if (res[i]["id"] != input_search) {
					delete res[i];
				}
			}
		} else if(names.indexOf(input_search)>=0) {
			for (var i = 0; i < res.length; i++) {
				if (res[i]["name"] != input_search) {
					delete res[i];
				}
			}
		} else {
			alert("无此记录")
			return false
		}
		res = $.grep(res, function(i){ return i });
		console.log(res)

		$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
		return true;
	}

	function searchBySubject() {	//根据科目查询
		$("#search_table  tr:not(:first)").html("");
		if (!checkSearch()) {
			return false;
		}
		var input_search = $("#input_search").val();
		var subjects = reponse.Columndata("subject", "table");
		var res = getTableData();
		console.log(res, subjects)
		if (subjects.indexOf(input_search)>=0) {
			for (var i = 0; i < res.length; i++) {
				if (res[i]["subject"] != input_search) {
					delete res[i];
				}
			}
		} else {
			alert("无此记录");
			return false;
		}
		res = $.grep(res, function(i){ return i });

		$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
		return true;
	}

	function searchByScore() {
		$("#search_table  tr:not(:first)").html("");
		if (!checkSearchScore()) {
			return false;
		}
		var input_search = $("#input_search").val()
		var scores = reponse.Columndata("score", "table");
		var input_score = input_search.split("-");

		var res = getTableData();
		// console.log(res, input_score, scores)
		scores = $.grep(scores, function(i){
									if(parseInt(input_score[1]) >= parseInt(i) && parseInt(input_score[0]) <= parseInt(i))
										return i });
		// console.log(scores)
		if (scores.length != 0) {
			for (var i = 0; i < res.length; i++) {
				if ((parseInt(res[i]["score"]) > parseInt(input_score[1])) || (parseInt(res[i]["score"]) < parseInt(input_score[0]))) {
					delete res[i];
				}
			}
		} else {
			alert("无此记录");
			return false;
		}
		res = $.grep(res, function(i){ return i });
		console.log(res)
		$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
		return true;
	}

	function uptr(btn, e) {//改行上移
		var tr = $(btn).parent().parent();
		reponse.moveuptr(tr, "table");
	}

	function downtr(btn, e) {//改行下移
		var tr = $(btn).parent().parent();
		reponse.moveDown(tr, "table");
	}

	function deletetr(a, e) {//删除改行信息
		if(window.confirm('确定删除吗？')){
			var tr = $(a).parent().parent();
			reponse.deletetr(tr, e);
    		return true;
		}else{
     		return false;
		}
	}

</script>
</html>