当前位置: 代码迷 >> JavaScript >> 运用jquery,jquery-ui,jquery-validation,json写一个组卷页面(动态组卷ajax+springmvc)
  详细解决方案

运用jquery,jquery-ui,jquery-validation,json写一个组卷页面(动态组卷ajax+springmvc)

热度:567   发布时间:2012-11-23 22:54:33.0
应用jquery,jquery-ui,jquery-validation,json写一个组卷页面(动态组卷ajax+springmvc)

?? 本人也是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+"页&nbsp;&nbsp;";
					  daohang+="共"+mydata.totalPage+"页&nbsp;&nbsp;";
					  if(mydata.currentPage==1){
					   daohang+="第一页 &nbsp;&nbsp;上一页 &nbsp;&nbsp;";
					  }
					  else{
			           daohang+="<a href='javascript:toPage(1,"+tp+")'>第一页</a>&nbsp;&nbsp;";
			           daohang+="<a href='javascript:toPage("+(mydata.currentPage-1)+","+tp+")'>上一页</a>&nbsp;&nbsp;";
					  }
					  if(mydata.currentPage!=mydata.totalPage)
					  {
					    daohang+="<a href='javascript:toPage("+(mydata.currentPage+1)+","+tp+")'>下一页</a>&nbsp;&nbsp;";
			            daohang+="<a href='javascript:toPage("+(mydata.totalPage)+","+tp+")'>最后一页</a>";
					  }
					  else{
					    daohang+="下一页 &nbsp;&nbsp;最后一页";
					  }
					  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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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' onclick='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)+"&nbsp;&nbsp;&nbsp;章:"+(mydata.knowledgepoint==null?'':mydata.knowledgepoint.chapter)+"&nbsp;&nbsp;&nbsp;节:"+(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>
?
1 楼 287854442 2011-11-12  
1.没有图
2.没有在线demo
3.没有使用代码格式
....
2 楼 jiangwt100 2011-11-12  
287854442 写道
1.没有图
2.没有在线demo
3.没有使用代码格式
....

在线demo不好弄啊!
  相关解决方案