环境背景
1.引入jquery.min.js
实现
1.查看
html代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>课程信息</title>
<link href="content/Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript"
src="content/Bootstrap/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="content/Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript"
src="content/js/curriculum.js"></script>
<style type="text/css">
th,td{
text-align:center; /*设置水平居中*/
vertical-align:middle;/*设置垂直居中*/
}
.head{
display:inline-block; }
.bt{
background-color:#ffffff;
border:0;
width:100%;
height:100%;
}
</style>
</head>
<body >
<div style="width:98%;" id="head" class="head">
<div class="head" style="margin-left:1%;width:50%;"><button style="background-color:#418ee6;color:white;width:25%;hight:10%;">课程表</button></div>
<div class="head" style="margin-left:1%;width:40%;">
<button style="background-color:#418ee6;color:white;width:25%;hight:10%;">周次</button>
<div class="head" style="margin-bottom:5px;">
<select id="rolltype" onchange="updateWeek()">
<option value=1 selected="selected">1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
</select>
</div>
<button style="background-color:#418ee6;color:white;width:25%;hight:10%;margin-left: 2%;">当前周次</button>
第<input type="text" value="1" id="currientWeek" readonly="readonly" style="width:5%;"/>周
<input type="text" value="1" id="xnxqhh" readonly="readonly" style="width:15%;"/>学期
</div>
</div>
<table align="center" border="1" width="98%" cellspacing="0" id="curriculum">
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>第一节</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第二节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第三节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第四节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第五节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第六节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第七节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第八节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第九节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第十节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第十一节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第十二节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
<tr>
<td>第十三节</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td>计算机</td>
</tr>
</table>
<div class="main2" style="width:98%;">
<div style="margin-left:1%;width:100%;background-color: green;"><h3>课程信息</h3></div>
<div style="margin-left:1%;width:100%;">
<div class="head" style="width:50%;">
<span>课程名称：</span><input id="lesson" type="text" style="width:80%;" placeholder="请输入课程名称"/>
</div>
<div class="head" >
<input type="radio" name="infotime" value="1" checked="checked" /><span>默认</span>
<!-- <input type="radio" name="infotime" value="2" /><span>单周</span>
<input type="radio" name="infotime" value="3" /><span>双周</span> -->
</div>
</div>
<div style="margin-left:1%;width:100%;margin-top:1%;">
<div class="head" style="width:50%;">
<span>老师名称：</span><input id="teacher" onfocus="dianji()" type="text" style="width:80%;" placeholder="请输入老师名称" readonly="readonly"/>
<!--用来保存老师的编号 userid -->
<input id="teaid" type="hidden"/>
<!-- 用来保存教室的标号 classroomid -->
<input id="classroomid" type="hidden"/>
</div>
<div class="head" >
<input id="ws1" type="number" placeholder="起始周" /><span>至</span>
<input id="we1" type="number" placeholder="结束周" />
</div>
</div>
<div style="margin-left:1%;width:100%;margin-top:1%;">
<div class="head" style="width:50%;">
<span>上课班级：</span><input id="subclass" type="text" style="width:80%;" placeholder="班级名称"/>
</div>
<div class="head" >
<input id="ws2" type="number" placeholder="起始周(当前行可以不输入)" /><span>至</span>
<input id="we2" type="number" placeholder="结束周(当前行可以不输入)" />
<!--用来保存对应课程的位置编号 -->
<input id="hid" type="hidden" />
</div>
</div>
</div>
<div class="foot" style="width:98%;hight:15%; margin-top:3%;">
<div style="margin-left:1%;width:100%;">
<!-- <div class="head" style="width:40%;"> -->
<button id="tijiao" onclick="tijiao()" style="background-color:#418ee6;color:white;width:10%;hight:20%;margin-left:34%;">提交</button>
<!-- </div> -->
<!-- <div class="head" style="width:40%;" > -->
<button id="del" onclick="del()" style="background-color:#418ee6;color:white;width:10%;hight:100%;margin-left:6%;">删除</button>
<!-- </div> -->
</div>
</div>
<!-- 添加参会人员弹窗 -->
<div class="modal fade " id="toSensor" tabindex="-1" role="dialog" style="margin-left:10%;width:80%;hight:100%;background-color:rgba(0,0,255,0);">
<div style="width:100%;height:85%;background-color:#ffffff;">
<div style="width:100%;height:90%;margin-top: 5%；">
<div class="modal-header">
<button class="close" data-dismiss="modal">X</button>
<div >参会预选人员</div>
</div>
<div style="width:100%;height:10%;">
<div style="margin-left: 5%;">
老师编号<input id="teacherid" type="text" />
老师名称<input id="teachername" type="text" />
<button onclick="searchTeacher()">搜索</button>
</div>
</div>
<div style="width:100%;height:80%;">
<div id="monitorList02" style="text-align:center; width: 100%;overflow-y: auto;height:400px; cellpadding: 50; cellspacing: 50;word-wrap:break-word; word-break:break-all;font-size:16px; float:left;">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" data-dismiss="modal" onclick="addSensors();">确定</button>
<button class="btn btn-primary" id="off" data-dismiss="modal" >取消</button>
</div>
</div>
</div>
</div>
<!-- 添加参会人员弹窗结束 -->
</body>
</html>
js代码
var map = {};//设置json
$(function(){
selectjson(0);
})
var selectjson = function(t){
var id = getQueryString("classroomid");
//var id = 2020101;
$("#classroomid").val(id);
$.post("selectCurriculumByWeek",{
classroomid:id,
week:t
},function(o){
o = JSON.parse(o);
if((o.state == 0 && o.data != undefined)||(o.state == 100)){
map={};
$("#currientWeek").val(o.zc);
$("#xnxqhh").val(o.xnxqh);
var maxJc = o.jc;
$("#rolltype option[value='"+o.zc+"']").attr("selected","selected");
if(o.data!=undefined){
for(i in o.data){
map[o.data[i].lessonjc +"s"+o.data[i].week]=o.data[i];//设置坐标的值，并把坐标作为JSON属性名称
}
}
$("#curriculum").html("<tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr>");
for( var j= 0;j < maxJc;j++){
var a="无",b="无",c="无",d="无",e="无",f="无",g="无";
var tt = j +1;
var a1 = tt+"s1";
var b1 = tt+"s2";
var c1 = tt+"s3";
var d1 = tt+"s4";
var e1 = tt+"s5";
var f1 = tt+"s6";
var g1 = tt+"s7";
if(map[tt+"s1"]!=undefined){
a = map[tt+"s1"].lessonname ;
}
if(map[tt+"s2"]!=undefined){
b = map[tt+"s2"].lessonname ;
}
if(map[tt+"s3"]!=undefined){
c = map[tt+"s3"].lessonname ;
}
if(map[tt+"s4"]!=undefined){
d = map[tt+"s4"].lessonname ;
}
if(map[tt+"s5"]!=undefined){
e = map[tt+"s5"].lessonname ;
}
if(map[tt+"s6"]!=undefined){
f = map[tt+"s6"].lessonname ;
}
if(map[tt+"s7"]!=undefined){
g = map[tt+"s7"].lessonname ;
}
$("#curriculum").append('<tr><td>第'+tt+'节</td><td><button class="bt" onclick="curriculumdisplay(\''+a1+'\')" id ="'+tt+'s1">'+a+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+b1+'\')" id ="'+tt+'s2">'+b+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+c1+'\')" id ="'+tt+'s3">'+c+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+d1+'\')" id ="'+tt+'s4">'+d+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+e1+'\')" id ="'+tt+'s5">'+e+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+f1+'\')" id ="'+tt+'s6">'+f+'</button></td>'
+'<td><button class="bt" onclick="curriculumdisplay(\''+g1+'\')" id ="'+tt+'s7">'+g+'</button></td>'
+'</tr>');
}
}else{
alert("当前教室在本学期没有排课");
$("#curriculum").html("<tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr>");
return null;
}
})
}
var curriculumdisplay = function(t){
if(map[t]==undefined){
$("#lesson").val("");
$("#teacher").val("");
$("#subclass").val("");
$("#ws1").val("");
$("#we1").val("");
$("#ws2").val("");
$("#we2").val("");
$("#hid").val(t);
alert("请添加相关的信息");
$("#tijiao").css("display","block");
$("#del").css("display","none");
return null;
}
$("#hid").val(t);
$("#lesson").val(map[t].lessonname);
$("#teacher").val(map[t].username);
$("#subclass").val(map[t].subclass);
$("#ws1").val(map[t].weekstart);
$("#we1").val(map[t].weekend);
alert("已有的课程只能查看和删除，不能修改");
$("#tijiao").css("display","none");
$("#del").css("display","block");
}
var updateWeek = function(){
var tung = $("#rolltype option:selected").val();
//var id = getQueryString("classroomid");
var id = 2020101;
selectjson(tung);
}
//老师的点击事件
var dianji =function(){
//添加参会人员---》显示
$("#toSensor").modal({backdrop:"static"}).modal('show');
var teacherid = $("#teacherid").val();
var teachername = $("#teachername").val();
display("","");
}
var display =function(teacherid,teachername){
$.ajax({
url:"selectUserRole",
type:"post",
dataType:"json",
data:{
"role":0,
"userid":teacherid,
"username":teachername,
"pageIndex":0,
"pageEnd":100
},
error: function(){
console.log("查询出错");
},
success:function(data){
$("#monitorList02").html("<tr><td width=8%>选择</td><td width=20%>用户名</td><td width=20%>名字</td></tr>");
if(data.state==100){
alert("没有查询到数据");
return null;
}
var list=data.data;
for(var i=0;i<list.length;i++){
var id=list[i].userid ;
var username = list[i].username;
$("#monitorList02").append("<tr><td><input name=\"ckb\" type=\"checkbox\" sensor-name="+username+" sensor-id="+id+" /></td><td>" +
id+"</td><td>"+username+"</td></tr> ");
}
}
})
}
var searchTeacher = function(){
var teacherid = $("#teacherid").val();
var teachername = $("#teachername").val();
if(teacherid ==undefined&&teachername==undefined){
alert("查询条件不能为空");
return null;
}
display(teacherid,teachername);
}
var xml;
function addSensors(){
$(xml).find("sensor").remove();
temp = "";
tempname = "";
$("input[name='ckb']").each(function(){
if($(this).is(":checked")){
var id=$(this).attr("sensor-id");
var name=$(this).attr("sensor-name");
if(temp == ""){
temp = id;
tempname = name;
}else{
//情况一，如果只是需要选择一个复选框，执行如下
alert("只能选择一个老师");
return null;
//情况二，如果需要同时选中多个复选框，执行下面两行代码
// temp = temp + "|"+id;
// tempname = tempname +"#"+name;
}
}
})
if(temp!=""){
$("#teaid").val(temp);
$("#teacher").val(tempname);
}
}
var tijiao = function(){
if($("#hid").val()==undefined||$("#hid").val()==""){
alert("请先选择一节课");
return null;
}
var lessonname = $("#lesson").val();
if(lessonname==undefined||lessonname==""){
alert("课程名称不能为空");
return null;
}
var username = $("#teacher").val();
if(username==undefined||username==""){
alert("老师名称不能为空");
return null;
}
var userid = $("#teaid").val();
var zc = $("#currientWeek").val();
var xnxqh = $("#xnxqhh").val();
var classroomid = $("#classroomid").val();
var lessonjc = $("#hid").val().split("s")[0];
var xq = $("#hid").val().split("s")[1];
var ws1 = $("#ws1").val();
var we1 = $("#we1").val();
if(ws1==undefined||ws1==""||we1==undefined||we1==""){
alert("起始周和结束周任意一个都不能为空");
return null;
}
if(parseInt(ws1) >=parseInt(we1)){
alert("起始周不能大于结束周");
return null;
}
var subclass = $("#subclass").val();
if(subclass==undefined||subclass==""){
alert("班级不能为空");
return null;
}
var ws2 = $("#ws2").val();
var we2 = $("#we2").val();
var wss2,wee2;
if(ws2==undefined||ws2==""){
if(!(we2==undefined||we2=="")){
alert("第二种情况下的起始周和结束周必须同时存在或不存在");
return null;
}
}else{
if(!(we2==undefined||we2=="")){
wss2 = ws2;
wee2 = we2;
if(parseInt(ws2) >=parseInt(we2)){
alert("起始周不能大于结束周");
return null;
}
if((parseInt(ws1)<=parseInt(ws2))&&(parseInt(ws2)<=parseInt(we1))){
alert("两次的起始周与结束周存在交叉");
return null;
}
if((parseInt(ws1)<=parseInt(we2))&&(parseInt(we2)<=parseInt(we1))){
alert("两次的起始周与结束周存在交叉");
return null;
}
}else{
alert("第二种情况下的起始周和结束周必须同时存在或不存在");
return null;
}
}
$.ajax({
url:"addCurriculum",
type:"post",
dataType:"json",
data:{
"lessonname":lessonname,
"username":username,
"userid":userid,
"zc":zc,
"xnxqh":xnxqh,
"lessonjc":lessonjc,
"xq":xq,
"ws1":ws1,
"we1":we1,
"subclass":subclass,
"classroomid":classroomid,
"wss2":wss2,
"wee2":wee2
},
error: function(){
console.log("查询出错");
},
success:function(data){
if(data.state !=0){
alert(data.msg);
return null;
}else{
alert(data.msg);
$("#lesson").val("");
$("#teacher").val("");
$("#subclass").val("");
$("#ws1").val("");
$("#we1").val("");
$("#ws2").val("");
$("#we2").val("");
$("#hid").val("");
selectjson($("#currientWeek").val());
}
}
})
}
var del = function(){
if($("#hid").val() == undefined){
alert("请先选择一节课");
return null;
}
if(map[$("#hid").val()]==undefined){
alert("只有已有的课程才可以删除");
return null;
}
var curriculumid = map[$("#hid").val()].curriculumid;
$.ajax({
url:"delCurruculum",
type:"post",
dataType:"json",
data:{
"curriculumid":curriculumid
},
error: function(){
console.log("查询出错");
},
success:function(data){
if(data.state !=0){
alert(data.msg);
return null;
}else{
alert(data.msg);
$("#lesson").val("");
$("#teacher").val("");
$("#subclass").val("");
$("#ws1").val("");
$("#we1").val("");
$("#ws2").val("");
$("#we2").val("");
$("#hid").val("");
selectjson($("#currientWeek").val());
}
}
})
}
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
效果
2.添加
初始效果
显示效果
1.如果选中课程
2.如果选中没有课程的情况
html代码
<div class="main2" style="width:98%;">
<div style="margin-left:1%;width:100%;background-color: green;"><h3>课程信息</h3></div>
<div style="margin-left:1%;width:100%;">
<div class="head" style="width:50%;">
<span>课程名称：</span><input id="lesson" type="text" style="width:80%;" placeholder="请输入课程名称"/>
</div>
<div class="head" >
<input type="radio" name="infotime" value="1" checked="checked" /><span>默认</span>
<!-- <input type="radio" name="infotime" value="2" /><span>单周</span>
<input type="radio" name="infotime" value="3" /><span>双周</span> -->
</div>
</div>
<div style="margin-left:1%;width:100%;margin-top:1%;">
<div class="head" style="width:50%;">
<span>老师名称：</span><input id="teacher" onfocus="dianji()" type="text" style="width:80%;" placeholder="请输入老师名称" readonly="readonly"/>
<!--用来保存老师的编号 userid -->
<input id="teaid" type="hidden"/>
<!-- 用来保存教室的标号 classroomid -->
<input id="classroomid" type="hidden"/>
</div>
<div class="head" >
<input id="ws1" type="number" placeholder="起始周" /><span>至</span>
<input id="we1" type="number" placeholder="结束周" />
</div>
</div>
<div style="margin-left:1%;width:100%;margin-top:1%;">
<div class="head" style="width:50%;">
<span>上课班级：</span><input id="subclass" type="text" style="width:80%;" placeholder="班级名称"/>
</div>
<div class="head" >
<input id="ws2" type="number" placeholder="起始周(当前行可以不输入)" /><span>至</span>
<input id="we2" type="number" placeholder="结束周(当前行可以不输入)" />
<!--用来保存对应课程的位置编号 -->
<input id="hid" type="hidden" />
</div>
</div>
</div>
js代码
var curriculumdisplay = function(t){
if(map[t]==undefined){
$("#lesson").val("");
$("#teacher").val("");
$("#subclass").val("");
$("#ws1").val("");
$("#we1").val("");
$("#ws2").val("");
$("#we2").val("");
$("#hid").val(t);
alert("请添加相关的信息");
$("#tijiao").css("display","block");
$("#del").css("display","none");
return null;
}
$("#hid").val(t);
$("#lesson").val(map[t].lessonname);
$("#teacher").val(map[t].username);
$("#subclass").val(map[t].subclass);
$("#ws1").val(map[t].weekstart);
$("#we1").val(map[t].weekend);
alert("已有的课程只能查看和删除，不能修改");
$("#tijiao").css("display","none");
$("#del").css("display","block");
}
3.删除
删除的js
var del = function(){
if($("#hid").val() == undefined){
alert("请先选择一节课");
return null;
}
if(map[$("#hid").val()]==undefined){
alert("只有已有的课程才可以删除");
return null;
}
var curriculumid = map[$("#hid").val()].curriculumid;
$.ajax({
url:"delCurruculum",
type:"post",
dataType:"json",
data:{
"curriculumid":curriculumid
},
error: function(){
console.log("查询出错");
},
success:function(data){
if(data.state !=0){
alert(data.msg);
return null;
}else{
alert(data.msg);
$("#lesson").val("");
$("#teacher").val("");
$("#subclass").val("");
$("#ws1").val("");
$("#we1").val("");
$("#ws2").val("");
$("#we2").val("");
$("#hid").val("");
selectjson($("#currientWeek").val());
}
}
})
}
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
