You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
7.5 KiB
188 lines
7.5 KiB
<%--
|
|
Created by IntelliJ IDEA.
|
|
User: 潘啟华
|
|
Date: 2018/8/25
|
|
Time: 13:03
|
|
To change this template use File | Settings | File Templates.
|
|
--%>
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
<!--输出,条件,迭代标签库-->
|
|
<html>
|
|
<head>
|
|
<title>Title</title>
|
|
<c:import url="../head.jsp"/>
|
|
<script id="demo" type="text/x-jquery-tmpl">
|
|
<a class="list-group-item list-group-item-action list-group-item-{{= type}} text-center" id="{{= id}}"><span>{{= chinese}}</span><span style="display:none">==============={{= kana}}</span><i class="fas fa-times"></i></a>
|
|
|
|
</script>
|
|
|
|
<script>
|
|
$(function () {
|
|
// $("#demo").tmpl([{type: 'primary'}, {type: 'secondary'}, {type: 'success'}, {type: 'danger'}, {type: 'warning'}, {type: 'info'}, {type: 'light'}, {type: 'dark'}]).appendTo('#word');
|
|
|
|
$("#myTab>li>a").click(function () {
|
|
if ($(this).attr('id') == 'add-tab') {
|
|
$("#add").show();
|
|
$("#add input").removeAttr("disabled");
|
|
$("button").show().text("添加")
|
|
if ($("select>option").length == 0) {
|
|
$("#customCheck1").click();
|
|
}
|
|
$("#customCheck1").parent().show()
|
|
} else {
|
|
$("#add").hide();
|
|
$("#add input").attr("disabled", "disabled");
|
|
$("button").text("查询");
|
|
$("input[name=courseName]").parent().hide();
|
|
if ($("select>option").length == 0) {
|
|
$("button").hide();
|
|
$("label[for=courseName]").text('没有任何课程');
|
|
$("select").hide();
|
|
} else {
|
|
$("label[for=courseName]").text('课程选择');
|
|
}
|
|
$("#customCheck1").parent().hide()
|
|
}
|
|
});
|
|
|
|
$("#word").on("click", 'a', function () {
|
|
if ($(this).find("span:last").is(":visible")) {
|
|
$(this).find("span:last").hide();
|
|
} else {
|
|
$(this).find("span:last").show();
|
|
}
|
|
|
|
});
|
|
|
|
$("#word").on("click","i",function () {
|
|
if(confirm('确认删除该单词？')) {
|
|
var id=$(this).parent().attr('id');
|
|
$.post('/word/D',{'id':id},function(result){
|
|
if (result['type'] == 'success') {
|
|
$('#'+id).remove();
|
|
}else{
|
|
alert('删除失败');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$("button").click(function () {
|
|
if ($("#search-tab").hasClass('active')) {
|
|
$("form").submit();
|
|
} else {
|
|
if ($('input[name=courseName]').is(":visible") && $('input[name=courseName]').val() == '') {
|
|
alert('请输入课程名');
|
|
return;
|
|
}
|
|
if ($('#kana').val() == '') {
|
|
alert('请输入假名');
|
|
return;
|
|
}
|
|
if ($('#chinese').val() == '') {
|
|
alert('请输入中文名');
|
|
return;
|
|
}
|
|
|
|
$.post('/word/C', $('form').serializeJson(), function (result) {
|
|
console.info(result);
|
|
if (result['type'] == 'success') {
|
|
result['data']['type'] = 'primary';
|
|
$("#demo").tmpl(result['data']).appendTo('#word');
|
|
} else {
|
|
alert('添加失败');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
<c:forEach items="${word.data}" var="i">
|
|
$("#demo").tmpl({'id':${i.id},'type': 'primary', 'kana': '${i.kana}', 'chinese': '${i.chinese}'}).appendTo('#word');
|
|
</c:forEach>
|
|
|
|
$("#customCheck1").click(function () {
|
|
if ($(this).is(":checked")) {
|
|
$("select[name=courseName]").parent().hide();
|
|
$("input[name=courseName]").parent().show();
|
|
$("label[for=courseName]").text('课程名');
|
|
$("select[name=courseName]").attr("disabled", "disabled");
|
|
$("input[name=courseName]").removeAttr("disabled")
|
|
} else {
|
|
$("select[name=courseName]").parent().show();
|
|
$("input[name=courseName]").parent().hide();
|
|
$("label[for=courseName]").text('课程选择');
|
|
$("input[name=courseName]").attr("disabled", "disabled");
|
|
$("select[name=courseName]").removeAttr("disabled")
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" id="search-tab">查询</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" id="add-tab">添加</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<form:form modelAttribute="wordModel">
|
|
<div class="form-group row justify-content-center">
|
|
<label for="courseName" class="col-1">${empty courseNames?'没有任何课程':'课程选择'}</label>
|
|
<div class="col-2" <c:if test="${empty courseNames}">style="display: none"</c:if>>
|
|
<select name="courseName" <c:if test="${empty courseNames}">disabled="disabled"</c:if>>
|
|
<c:forEach items="${courseNames}" var="courseName">
|
|
<option value="${courseName}"
|
|
<c:if test="${wordModel.courseName==courseName}">selected</c:if>>${courseName}</option>
|
|
</c:forEach>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="col-2" style="display: none">
|
|
<input name="courseName" <c:if test="${!empty courseNames}">disabled="disabled"</c:if>>
|
|
</div>
|
|
|
|
<div class="col-1" style="display: none">
|
|
<input type="checkbox" class="custom-control-input"
|
|
<c:if test="${empty courseNames}">checked</c:if> id="customCheck1">
|
|
<label class="custom-control-label" for="customCheck1">新建课程</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="add" style="display: none">
|
|
<div class="form-group row justify-content-center">
|
|
<label for="kana" class="col-1">假名</label>
|
|
<div class="col-3">
|
|
<form:input path="kana"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row justify-content-center">
|
|
<label for="chinese" class="col-1">中文</label>
|
|
<div class="col-3">
|
|
<form:input path="chinese"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<button type="button" class="btn btn-primary offset-5"
|
|
<c:if test="${empty courseNames}">style="display: none"</c:if>>查询
|
|
</button>
|
|
</div>
|
|
</form:form>
|
|
</div>
|
|
|
|
<div id="word">
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|