jsp 语言
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<meta name="keywords" content="课表生成结构" />
<meta name="description" content="课表生成结构" />
<link rel="stylesheet" type="text/css" href="${ctxStatic}/common/css/vendor.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/common/css/app-blue.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/common/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/common/css/common.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/common/css/index.css">
<!--自适应-->
<script src="${ctxStatic}/common/js/jquery.min.js"></script>
<style>
body{
background: transparent;
}
.classTitle{
color:#3F3F3F;
font-size: 30px;
margin: 10px 0 30px;
}
.classBox{
width: 100%;
padding-bottom: 30px;
}
.classL {
float: left;
width: 450px;
background: #fff;
padding: 35px 0;
border: 0;
}
.classLBox h3 {
font-size: 16px;
color: #333333;
margin: 15px 0;
line-height: 24px;
position: relative;
/*padding-left: 20px;*/
}
.classLBox h3.bg3,.classLBox h3.bg4{
margin-bottom: 0;
}
.classLBox h3 span{
color: #5FBDF6;
font-size: 18px;
}
.classLBox h3 i{
font-size: 30px;
color: #3F3F3F;
margin: 0 5px;
}
.classLDate{
margin-left: -9px;
margin-right: -9px;
}
.classLDate li{
width: 33.333333%;
padding:0 9px;
}
.classLDate li div{
border: 1px solid #CBEBFF;
border-radius: 3px;
display: block!important;
height: 48px;
text-align: center;
line-height: 46px;
font-size: 0px;
transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
-webkit-transition:all 0.3s;
}
.classLDate li div > *{
display: inline-block;
vertical-align: middle;
transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
-webkit-transition:all 0.3s;
}
.classLDate li i{
margin-left: 12px;
width: 22px;
height: 22px;
background: #E8F6FF;
color: #E8F6FF;
line-height: 20px;
border: 1px solid #E8F6FF;
text-align: center;
}
.classLDate li img{
margin-top: 6px;
width: 14px;
display: none;
}
.classLDate li span{
font-size: 15px;
color: #3F3F3F;
}
.classLDate li.active div{
background: #5FBDF6;
}
.classLDate li.active span{
color: #fff;
}
.classLDate li.active i{
border-color: #fff;
background: #5FBDF6;
color: #fff;
}
.classLDate li.active img{
display: inline-block;
}
.classLBox{
padding: 0 35px 30px;
margin-bottom: 30px;
border-bottom: 1px dashed #EDEDED;
}
.classLBox:last-child{
margin-bottom: 20px;
}
.classLBtn{
height: 50px;
margin-top: 60px;
padding:0 50px;
}
.classLBtn button {
width: 100%;
height: 100%;
border-color: transparent;
outline: none;
background: #FFA32C;
color: #fff;
font-size: 18px;
border-radius: 3px;
}
.classLTitle {
font-size: 18px;
color: #D1D1D1;
text-align: left;
line-height: 30px;
padding: 0 35px 30px;
border-bottom: 1px dashed #EDEDED;
margin-bottom: 30px;
}
#updateName{
/*border: 0;*/
/*width: 100%;*/
/*text-align: center;*/
color: #3F3F3F;
font-size: 30px;
margin-right: 5px;
}
.classInput{
width: 260px;
height: 40px;
}
.classR {
margin-left: 475px;
min-width: 880px;
padding: 30px;
background: #fff;
}
.classInput input{
width: 126px;
height: 40px;
line-height: 38px;
border: 1px solid #E9EBEC;
font-size: 18px;
color: #FFA32C;
border-radius: 3px;
}
.classInput > span{
height: 40px;
line-height: 40px;
position: absolute;
top: 0;
left: 103px;
font-size: 15px;
color: #C0C0C0;
}
.addSub{
width: 104px;
height: 40px;
background: transparent;
left: 126px;
right: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.addSub span{
display: block;
float: left;
margin-left: 3px;
width: 40px;
height: 40px;
background: #3F3F3F;
border-radius: 3px;
}
.addSub span:first-child{
background: #FFA32C;
}
.addSub img{
width: 20px;
display: block;
margin-top: 10px;
margin-left: 10px;
}
.classRDate li,.classR li{
border-top: 1px solid #5FBDF6;
border-right: 1px solid #5FBDF6;
}
.todayClass li:first-child, .classRDate li {
background: #E8F6FF;
}
.classR li>span{
color: #5FBDF6;
width: 100%;
}
.classR li>span b{
margin-top: 5px;
display: block;
line-height: 20px;
padding: 0;
}
.classR li>span input{
border: 0;
display: block;
width: 90%;
margin-left: 5%;
color: #5FBDF6;
height: 20px;
line-height: 20px;
border-radius: 10px;
background: #fff;
text-align: center;
}
.todayClass li{
height: 60px;
}
.todayClass li:first-child{
color: #5FBDF6;
}
.classRDate,.todayClass{
border-left: 1px solid #5FBDF6;
}
.todayClass ul:last-child li{
border-bottom: 1px solid #5FBDF6;
}
.morning li {
background: transparent;
color: #3E3E3E;
}
.Afternoon li {
background: transparent;
color: #3E3E3E;
}
.evening li {
background: transparent;
color: #3E3E3E;
}
</style>
<script src="${ctxStatic}/common/js/index.js"></script>
<%--<script src="${ctxStatic}/common/js/main.js"></script>--%>
</head>
<body>
<div class="wrapper wrapper-content">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<a class="panelButton" href="${ctx}/classScheduleStructure/classScheduleStructure"><i class="ti-angle-left"></i> 返回 </a>
</h3>
</div>
<!-- / class_sec1 -->
<div class="class_sec class_sec1">
<!-- <div class="classTitle">修改/查看课表结构</div> -->
<div class="classBox">
<div class="classL">
<div class="classLTitle">
<input id="ids" name="ids" type="hidden" value="${classScheduleStructure.id}">
<!-- <input id="updateName" name="s" value="${classScheduleStructure.classshstructure}" readonly="readonly" type="text" /> -->
<span id="updateName" name="s">${classScheduleStructure.classshstructure}</span><span> 结构设置</span>
</div>
<div class="classLBox">
<h3 class="bg1"><span>第<i>1</i>步：</span>设置上课天数</h3>
<ul class="classLDate" id="ul">
<li name="一" num="1" <c:if test="${kebiaojiegou.monday==1}">class="active" </c:if>><div><span>星期一</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="二" num="2" <c:if test="${kebiaojiegou.tuesday==1}">class="active" </c:if>><div><span>星期二</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="三" num="3" <c:if test="${kebiaojiegou.wednesday==1}">class="active" </c:if>><div><span>星期三</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="四" num="4" <c:if test="${kebiaojiegou.thursday==1}">class="active" </c:if>><div><span>星期四</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="五" num="5" <c:if test="${kebiaojiegou.friday==1}">class="active" </c:if>><div><span>星期五</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="六" num="6" <c:if test="${kebiaojiegou.saturday==1}">class="active" </c:if>><div><span>星期六</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
<li name="日" num="7" <c:if test="${kebiaojiegou.sunday==1}">class="active" </c:if>><div><span>星期日</span><i><img
src="${ctxStatic}/common/images/check2.png" alt=""></i></div>
</li>
</ul>
</div>
<div class="classLBox">
<h3 class="bg2"><span>第<i>2</i>步：</span>设置每天上课节数</h3>
<ul class="classLNum">
<li name="morning"><span>上午：</span>
<div class="classInput">
<input type="number" id="shangwu" readonly="readonly" value="${kebiaojiegou.morning }" min="0" />
<span>节</span>
<div class="addSub">
<span class=""><img src="${ctxStatic}/common/images/add2.png" alt=""></span>
<span class=""><img src="${ctxStatic}/common/images/del2.png" alt=""></span>
</div>
</div>
</li>
<li name="Afternoon"><span>下午：</span>
<div class="classInput">
<input type="number" readonly="readonly" id="xiawu" value="${kebiaojiegou.afternoon }" min="0" />
<span>节</span>
<div class="addSub">
<span class=""><img src="${ctxStatic}/common/images/add2.png" alt=""></span>
<span class=""><img src="${ctxStatic}/common/images/del2.png" alt=""></span>
</div>
</div>
</li>
<li name="evening"><span>晚上：</span>
<div class="classInput">
<input type="number" id="wanshang" readonly="readonly" value="${kebiaojiegou.evening }" min="0" />
<span>节</span>
<div class="addSub">
<span class=""><img src="${ctxStatic}/common/images/add2.png" alt=""></span>
<span class=""><img src="${ctxStatic}/common/images/del2.png" alt=""></span>
</div>
</div>
</li>
</ul>
</div>
<div class="classLBox">
<h3 class="bg3"><span>第<i>3</i>步：</span>双击节次时间，修改上课时间</h3>
</div>
<!-- <div class="classLBox">
<h3 class="bg2"><span>第<i>4</i>步：</span>跨校区排课教师间隔时间设置</h3>
<ul class="classLNum">
<li name="morning">
<div style="display: block;font-size: 16px;color: #333333;margin: 15px 0 5px;line-height: 24px;position: relative;">a校区至b校区时间间隔:</div>
<div style="display: block;" class="classInput">
<input type="number" min="0" />
<span style="left: 135px;">小时</span>
</div>
</li>
<li name="morning">
<div style="display: block;font-size: 16px;color: #333333;margin: 15px 0 5px;line-height: 24px;position: relative;">a校区至c校区时间间隔:</div>
<div style="display: block;" class="classInput">
<input type="number" min="0" />
<span style="left: 135px;">小时</span>
</div>
</li>
<li name="morning">
<div style="display: block;font-size: 16px;color: #333333;margin: 15px 0 5px;line-height: 24px;position: relative;">b校区至c校区时间间隔:</div>
<div style="display: block;" class="classInput">
<input type="number" min="0" />
<span style="left: 135px;">小时</span>
</div>
</li>
</ul>
</div> -->
<div class="classLBox">
<h3 class="bg4"><span>第<i>4</i>步：</span>保存设置</h3>
</div>
<div class="classLBtn">
<button id="save">保存设置</button>
</div>
</div>
<div class="classR">
<div class="classTitle">${classScheduleStructure.classshstructure}结构</div>
<ul class="classRDate">
<li class="week"><span>星期/节次<br />
</span></li>
</ul>
<c:set value="${ fn:split(kebiaojiegou.studyhour, ',') }" var="str1" />
<div class="morning todayClass" id="morningDiv">
<c:forEach items="${str1 }" var="time" varStatus="status" end="${kebiaojiegou.morning-1}">
<ul num="${status.count }">
<li><span>第<i>${status.count }</i>节<br /> <b>${time }</b>
</span></li>
</ul>
<c:set value="${status.count}" var="number" />
</c:forEach>
</div>
<div class="Afternoon todayClass">
<c:forEach items="${str1 }" var="time" varStatus="status" begin="${kebiaojiegou.morning }" end="${kebiaojiegou.afternoon+kebiaojiegou.morning-1}">
<ul num="${status.count+number }">
<li><span>第<i>${status.count+number }</i>节<br /> <b>${time }</b>
</span></li>
</ul>
<c:set value="${ status.count }" var="number2" />
</c:forEach>
</div>
<div class="evening todayClass">
<c:forEach items="${str1 }" var="time" varStatus="status" begin="${kebiaojiegou.afternoon+ kebiaojiegou.morning}">
<ul num="${status.count +number+number2}">
<li><span>第<i>${status.count +number+number2}</i>节<br /> <b>${time }</b>
</span></li>
</ul>
</c:forEach>
</div>
<input name="id" type="hidden" id="id" value="${kebiaojiegou.id }">
</div>
</div>
</div>
<!-- / class_sec1 -->
</div>
</div>
<!-- / warpper -->
</body>
<script>
$(document).ready(function() {
$(".active").each(function() {
var nums = $(this).attr("num");
var that = this;
weekAdd(nums, that)
})
});
$('.todayClass').on('dblclick', 'ul li', function() {
var obj = $(this).find('b');
var html = '<input type="text" value="' + obj.text() + '" />';
obj.append(html);
obj.find('input').focus();
}).on('blur', 'input', function() {
var txt = $(this).val();
$(this).parent().text(txt).find('input').remove();
})
//选中星期几
$('.classLDate').on('click', 'li', function() {
var that = this;
var nums = $(that).attr('num');
if ($(that).hasClass('active')) {
weekRemove(nums, that)
} else {
weekAdd(nums, that)
}
})
// input只能输入整数
$('.classLNum').on('keyup', 'input', function() {
NumberCheck(this)
})
// 设置每天上课节数 input
$('.addSub').on('click', 'span', function() {
var index = $(this).index();
var parents = $(this).parents('li');
var inputs = parents.find('input');
var inputTxt = inputs.val();
var titles = '.' + parents.attr('name');
var ulLast = $(titles).find('ul:last');
var num = parseInt(ulLast.attr('num'));
var uls = $('.todayClass ul');
if (index == 0) {
inputTxt++;
inputAdd(num, uls, titles)
} else {
inputTxt--;
if (inputTxt <= 0) {
inputTxt = 0;
}
inputRemove(ulLast, uls, num)
}
inputs.val(inputTxt);
})
// 修改时间
function times() {
$('.todayClass').on('dblclick', 'ul li', function() {
var obj = $(this).find('b');
var html = '<input type="text" value="' + obj.text() + '" />';
obj.append(html);
obj.find('input').focus();
}).on('blur', 'input', function() {
var txt = $(this).val();
$(this).parent().text(txt).find('input').remove();
})
}
//增加课程
function inputAdd(nums, uls, titles) {
var num = nums ? nums : num = $(titles).prevAll('.todayClass').find(
'ul').length;
var ulIndex = num - 1;
// console.log(num)
num++;
var html = '<ul num="' + num + '"><li><span>第<i>' + num +
'</i>节<br /><b>00:00-00:00</b></span></li>'
$('.classLDate li.active').each(function(i, n) {
html += '<li num="' + $(n).attr('num') + '"></li>';
});
html += '</ul>'
$(titles).append(html);
uls.each(function(i, n) {
if (i > ulIndex) {
num++;
$(n).attr('num', num).find('li:first i').text(num)
}
})
}
//减少课程
function inputRemove(ulLast, uls, num) {
ulLast.remove()
var ulIndex = num - 1;
if (!num) {
return
}
console.log(num + 'ppp')
uls.each(function(i, n) {
if (i > ulIndex) {
$(n).attr('num', num).find('li:first i').text(num)
num++;
}
})
}
//星期移除
function weekRemove(nums, that) {
$(that).removeClass('active');
classNumJ(nums)
$('.classRDate li').each(function(i, n) {
var num = $(this).attr('num');
if (nums == num) {
$(this).remove();
}
})
}
//星期增加
function weekAdd(nums, that) {
$(that).addClass('active');
var index = $('.classLDate li.active').index($(that));
var names = $(that).attr('name');
classNumA(index, nums)
$('.classRDate li').each(
function(i, n) {
if (index == i) {
var html = '<li num="' + nums + '"><span>星期' + names +
'</span></li>'
$(this).after(html);
}
})
}
//课程 色块
function classNumA(index, nums) {
$('.todayClass ul').each(function(i, n) {
$(n).find('li').each(function(i, n) {
if (index == i) {
var html = '<li num="' + nums + '"></li>'
$(this).after(html);
}
})
})
}
function classNumJ(nums) {
$(".todayClass li[num='" + nums + "']").remove();
}
// input只能输入整数
function NumberCheck(t) {
var num = t.value;
var re = /^\d*$/;
if (!re.test(num)) {
isNaN(parseInt(num)) ? t.value = 0 : t.value = parseInt(num);
}
}
//保存课表结构
$('#save').click(function() {
var shangwu = $('#shangwu').val()
var xiawu = $('#xiawu').val()
var wanshang = $('#wanshang').val()
var xingqi = "";
var nums = $('.active').text();
$('.active').each(function(i, n){
xingqi = xingqi + $(n).attr('name') + ","
})
// for (i = 0; i < nums.length; i++) {
// if ((i + 1) % 3 == 0) {
// console.log(nums[i])
// xingqi = xingqi + nums[i] + ","
// }
// }
var id = $('#id').val();
var ids = $('#ids').val()
var timeArr = '';
$('b').each(function(i, n) {
i == 0 ? timeArr += $(n).text() : timeArr += ',' + $(n).text();
})
$.ajax({
type: 'post',
url: "${ctx}/kebiaojiegou/keBiaoJieGou/update",
data: {
ids: ids,
id: id,
shangwu: shangwu,
xiawu: xiawu,
wanshang: wanshang,
xingqi: xingqi,
times: timeArr
},
success: function(data) {
if (data.success) {
window.location = "${ctx}/classScheduleStructure/classScheduleStructure";
}
}
})
})
$(window).load(function() {
// $('.classR').outerHeight($('.classL').outerHeight());
$('.classR').css('minHeight', $('.classL').outerHeight());
$('.classBox').height($(window).height() - 20 - 10 - 100)
})
</script>
</html>
扫一扫
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
