本人也是jquery的新手,写得若有问题,请大家提出宝贵意见共同提高.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/manageStyle.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet"
href="style/ui-base/jquery-ui.css" />
<style type="text/css">
body {
text-align: left;
}
.content {
width: 50%;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
td {
padding: 7px;
}
form input {
font-size: 20px;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.json-2.3.js"></script>
<script src="/${projectName}/studentExam/js/jquery.validate.min.js"></script>
<script language="javascript">
function removeProblem(problemId,type){
if(type==1)
$("'.simple"+problemId+"'").remove();
else if(type==2)
$("'.multi"+problemId+"'").remove();
else if(type==3)
$("'.notConfirm"+problemId+"'").remove();
else if(type==4)
$("'.choose"+problemId+"'").remove();
else if(type==5)
$("'.simpleSubject"+problemId+"'").remove();
else if(type==6)
$("'.communication"+problemId+"'").remove();
}
function toPage(current,tp){
$.post("/${projectName}/getPagedProblems.ajax",
{
type:tp,
currentPage:current
},
function(data){
var daohang = '';
var mydata = eval('('+data+')');
var info = '<tr><th>选择</th><th>题目名称</th><th>教材</th><th>章</th><th>节</th><th>详情</th></tr>';
$.each(mydata.list,function(index,entity) {
info += "<tr><td><input type=checkbox name='SelectedProblems"+tp+"' value='"+entity.problemId+"'/></td><td>"+entity.problemName+"</td><td>"+(entity.knowledgepoint==null?'nothing':entity.knowledgepoint.book.bookName)+"</td><td>"+(entity.knowledgepoint==null?'nothing':entity.knowledgepoint.chapter)+"</td><td>"+(entity.knowledgepoint==null?'nothing':entity.knowledgepoint.section)+"</td><td>详情</td></tr>";
});
daohang+="第"+mydata.currentPage+"页 ";
daohang+="共"+mydata.totalPage+"页 ";
if(mydata.currentPage==1){
daohang+="第一页 上一页 ";
}
else{
daohang+="<a href='javascript:toPage(1,"+tp+")'>第一页</a> ";
daohang+="<a href='javascript:toPage("+(mydata.currentPage-1)+","+tp+")'>上一页</a> ";
}
if(mydata.currentPage!=mydata.totalPage)
{
daohang+="<a href='javascript:toPage("+(mydata.currentPage+1)+","+tp+")'>下一页</a> ";
daohang+="<a href='javascript:toPage("+(mydata.totalPage)+","+tp+")'>最后一页</a>";
}
else{
daohang+="下一页 最后一页";
}
if(tp==1)
{
$("#singleTable").html(info);
$("#SingleDaoHang").html(daohang);
}
else if(tp==2)
{
$("#multiTable").html(info);
$("#MultiDaoHang").html(daohang);
}
else if(tp==3)
{
$("#notConfirmTable").html(info);
$("#NotConfirmDaoHang").html(daohang);
}
else if(tp==4)
{
$("#chooseTable").html(info);
$("#ChooseDaoHang").html(daohang);
}
else if(tp==5)
{
$("#simpleSubjectTable").html(info);
$("#SimpleSubjectDaoHang").html(daohang);
}
else if(tp==6)
{
$("#communicationTable").html(info);
$("#CommunicationDaoHang").html(daohang);
}
});
}
function paperItem(id,percent){
this.id = id;
this.percent = percent;
}
$(document).ready(function(){
$("#paperForm").validate();
$("#SingleDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加单选"
});
$("#MultiDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加多选"
});
$("#NotConfirmDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加不定项选择"
});
$("#ChooseDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加判断"
});
$("#SimpleSubjectDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加简答题"
});
$("#CommunicationDialog").dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
title:"添加论述题"
});
$("#simpleAdd").click(function(){
$("input[name='SelectedProblems1']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='simple"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",1)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' width='50px' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' name='points' id='"+mydata.problemId+"'/></td></tr>";
info+="<tr class='simple"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"(答案:"+mydata.problemObjectAnswer+")</td></tr>";
$.each(mydata.selectedItems,function(index,entity){
info+="<tr class='simple"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+entity.selectedMark+"."+entity.selectedContent+"</td></tr>";
});
info+="<tr class='simple"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='simple"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#simpleTitle").after(info);
});
});
$("#SingleDialog").dialog("close");
});
$("#multiAdd").click(function(){
$("input[name='SelectedProblems2']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='multi"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",2)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' width='50px' name='points' id='"+mydata.problemId+"'/></td></tr>";
info+="<tr class='multi"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"(答案:"+mydata.problemObjectAnswer+")</td></tr>";
$.each(mydata.selectedItems,function(index,entity){
info+="<tr class='multi"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+entity.selectedMark+"."+entity.selectedContent+"</td></tr>";
});
info+="<tr class='multi"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='multi"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#multiTitle").after(info);
});
});
$("#MultiDialog").dialog("close");
});
$("#notConfirmAdd").click(function(){
$("input[name='SelectedProblems3']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='notConfirm"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",3)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' width='50px' name='points' id='"+mydata.problemId+"'/></td></tr>";
info+="<tr class='notConfirm"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"(答案:"+mydata.problemObjectAnswer+")</td></tr>";
$.each(mydata.selectedItems,function(index,entity){
info+="<tr class='notConfirm"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+entity.selectedMark+"."+entity.selectedContent+"</td></tr>";
});
info+="<tr class='notConfirm"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='notConfirm"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#notConfirmTitle").after(info);
});
});
$("#NotConfirmDialog").dialog("close");
});
$("#chooseAdd").click(function(){
$("input[name='SelectedProblems4']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='choose"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",4)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' width='50px' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' name='points' id='"+mydata.problemId+"'/></td></tr>";
info+="<tr class='choose"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"(答案:"+(mydata.problemTrue?'正确':'错误')+")</td></tr>";
info+="<tr class='choose"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='choose"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#chooseTitle").after(info);
});
});
$("#ChooseDialog").dialog("close");
});
$("#simpleSubjectAdd").click(function(){
$("input[name='SelectedProblems5']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='simpleSubject"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",5)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' width='50px' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' id='"+mydata.problemId+"' name='points'/></td></tr>";
info+="<tr class='simpleSubject"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"</td></tr>";
info+="<tr class='simpleSubject"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>(答案):"+mydata.problemSubjectAnswer+"</td></tr>";
info+="<tr class='simpleSubject"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='simpleSubject"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#simpleSubjectTitle").after(info);
});
});
$("#SimpleSubjectDialog").dialog("close");
});
$("#communicationAdd").click(function(){
$("input[name='SelectedProblems6']:checked").each(function(index) {
var problemId = $(this).val();
$.post("/${projectName}/getProblemById/"+problemId+".ajax",
null,
function(data){
var info = '';
var mydata = eval('('+data+')');
info+="<tr class='communication"+mydata.problemId+"'><td><button class='ui-state-default' οnclick='javascript:removeProblem("+mydata.problemId+",6)'>移除</button>"+mydata.problemId+"</td><td>"+mydata.problemName+"</td><td>难度:"+mydata.problemDifficulty+"</td><td>分值:<input type='text' width='50px' name='points' title='不能为空,且为数字' maxlength='2' class='inputpercent required number' id='"+mydata.problemId+"'/></td></tr>";
info+="<tr class='communication"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>"+mydata.problemContent+"</td></tr>";
info+="<tr class='communication"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>(答案):"+mydata.problemSubjectAnswer+"</td></tr>";
info+="<tr class='communication"+mydata.problemId+"'><td colspan='4'>教材:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.book.bookName)+" 章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+" 节:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.section)+"</td></tr>";
info+="<tr class='communication"+mydata.problemId+"'><td colspan='4' style='word-break:break-all'>知识点:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"</td></tr>";
$("#communicationTitle").after(info);
});
});
$("#CommunicationDialog").dialog("close");
});
$("#addSingle").click(function(){
$("#SingleDialog").dialog("open");
toPage(1,1);
});
$("#addMulti").click(function(){
$("#MultiDialog").dialog("open");
toPage(1,2);
});
$("#addNotConfirm").click(function(){
$("#NotConfirmDialog").dialog("open");
toPage(1,3);
});
$("#addChoose").click(function(){
$("#ChooseDialog").dialog("open");
toPage(1,4);
});
$("#addSimpleSubject").click(function(){
$("#SimpleSubjectDialog").dialog("open");
toPage(1,5);
});
$("#addCommunication").click(function(){
$("#CommunicationDialog").dialog("open");
toPage(1,6);
});
$("#paperSubmit").click(function(){
var arrayObject = new Array();
$("input[name='points']").each(function(index){
var pi = new paperItem($(this).attr('id'),$(this).val());
arrayObject.push(pi);
});
var jsonObject = $.toJSON(arrayObject);
$("#jsonObject").attr('value',jsonObject);
$("#paperForm").submit();
});
});
</script>
<title>组织试卷</title>
</head>
<body>
<h1>
组织试卷
</h1>
<form id="paperForm" action="/${projectName}/groupPaper.make?method=group" method="post">
<div>
试卷名称:
<input type="text" name="papername" title="不能为空" class="required" maxlength="30"/>
<br/>
试卷难度:
<input type="text" name="paperdifficult" title="请输入一位数字" class="required number" maxlength="1"/>
<br/>
考试时长:
<input type="text" name="paperlimitedtime" title="请输入5位以下数字" class="required number" maxlength="5"/>
<br/>
<br/>
</div>
<div id="addProblems">
<button class="ui-state-default" id="addSingle">
添加单选题
</button>
<button class="ui-state-default" id="addMulti">
添加多选题
</button>
<button class="ui-state-default" id="addNotConfirm">
添加不定项选择题
</button>
<button class="ui-state-default" id="addChoose">
添加判断题
</button>
<button class="ui-state-default" id="addSimpleSubject">
添加简答题
</button>
<button class="ui-state-default" id="addCommunication">
添加论述题
</button>
<br /><br/>
</div>
<div id="content" align="center">
<table width="100%">
<tr id="simpleTitle">
<th colspan="4">
一、单选题
</th>
</tr>
<tr id="multiTitle">
<th colspan="4">
二、多选题
</th>
</tr>
<tr id="notConfirmTitle">
<th colspan="4">
三、不定项选择题
</th>
</tr>
<tr id="chooseTitle">
<th colspan="4">
四、判断题
</th>
</tr>
<tr id="simpleSubjectTitle">
<th colspan="4">
五、简答题
</th>
</tr>
<tr id="communicationTitle">
<th colspan="4">
六、论述题
</th>
</tr>
</table>
<input type="hidden" id="jsonObject" name="jsonString"/>
<button class="ui-state-default" id="paperSubmit">提交</button>
</div>
</form>
<div id="SingleDialog" style="display: none;">
<table width="100%" id="singleTable">
</table>
<div id="SingleDaoHang"></div>
<button class="ui-state-default" id="simpleAdd">
添加
</button>
</div>
<div id="MultiDialog" style="display: none;">
<table width="100%" id="multiTable"></table>
<div id="MultiDaoHang"></div>
<button class="ui-state-default" id="multiAdd">
添加
</button>
</div>
<div id="NotConfirmDialog" style="display: none;">
<table width="100%" id="notConfirmTable"></table>
<div id="NotConfirmDaoHang"></div>
<button class="ui-state-default" id="notConfirmAdd">
添加
</button>
</div>
<div id="ChooseDialog" style="display: none;">
<table width="100%" id="chooseTable"></table>
<div id="ChooseDaoHang"></div>
<button class="ui-state-default" id="chooseAdd">
添加
</button>
</div>
<div id="SimpleSubjectDialog" style="display: none;">
<table width="100%" id="simpleSubjectTable"></table>
<div id="SimpleSubjectDaoHang"></div>
<button class="ui-state-default" id="simpleSubjectAdd">
添加
</button>
</div>
<div id="CommunicationDialog" style="display: none;">
<table width="100%" id="communicationTable"></table>
<div id="CommunicationDaoHang"></div>
<button class="ui-state-default" id="communicationAdd">
添加
</button>
</div>
</body>
</html>