对于复杂表单的编写,因为我做的是一个调查问卷,这些问卷数据是从数据库中读出来的,所有题目数量不确定,即表单数量不确定,所以比较复杂,后来上网搜了一些资料把它弄出来了。
首先,要建立两个对象,一个是问卷类型对象,另一个是问题对象:
questionnaire问卷类型类
import java.util.List;
public class QuestionNaire {
private Integer QNID;
private Integer EmpID;
private List<Question> questions;
public Integer getQNID() {
return QNID;
}
public void setQNID(Integer qNID) {
QNID = qNID;
}
public Integer getEmpID() {
return EmpID;
}
public void setEmpID(Integer empID) {
EmpID = empID;
}
public List<Question> getQuestions() {
return questions;
}
public void setQuestions(List<Question> questions) {
this.questions = questions;
}
}
question问卷类对象
public class Question {
private String QID;
private String answer[];
public String getQID() {
return QID;
}
public void setQID(String qID) {
QID = qID;
}
public String[] getAnswer() {
return answer;
}
public void setAnswer(String[] answer) {
this.answer = answer;
}
}
页面写法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>产品问卷调查</title>
<link rel="Shortcut Icon" href="/hr-web/skin/images/logo/logo.ico">
<link href="../custom/css/toastr.css" rel="stylesheet">
<link href="../custom/css/questionnaire.css" rel="stylesheet">
<script src="../custom/js/jquery-1.12.4.js"></script>
<script src="../custom/js/Validform_v5.3.2_min.js"></script>
<script src="../custom/js/toastr.js"></script>
<!--[if IE]>
<style>
.quest-radio,.quest-chekbox{background:none}
</style>
<![endif]-->
<script type="text/javascript">
toastr.options = {
"closeButton": false,
"debug": false,
"positionClass": "toast-top-center",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
function saveData(){
var demo = $(".form1").Validform();
if(demo.check()){
$(".form1").submit();
}else{
toastr.warning("请将带*的必填信息填写完整!", "提示信息");
}
}
</script>
</head>
<body>
<#if questionnaire?? && questionnaire?size gt 0>
<div class="mainbox">
<div class="quest-title"> <img src="../custom/images/questionnaire-title-logo.png" height="17" />
<h1>${questionnaire[language]}</h1>
</div>
<div class="quest-greet">
<p class="quest-greet1">尊敬的用户:</p>
<p class="quest-greet2">${questionnaire["Header"]}</p>
</div>
<div>
<div class="question">
<form class="form1" name="form1" method="post" action=<#if actionPath??>${actionPath}</#if>>
<#if questions?? && questionoptions??>
<input type="hidden" name="QNID" value=${questionnaire["ID"]} />
<input type="hidden" name="EmpID" value=${EmpID} />
<#list questions as question>
<p><img src="../custom/images/questionnaire-title-prefix.png" height="11" />${question[language]}<#if question["Required"]==0><span style="width:10px;color:#b20202">*</span></#if></p>
<input type="hidden" name=${"questions["+question_index+"].QID"} value=${question["ID"]} />
<#list questionoptions as questionoption>
<#if question["ID"] == questionoption["QID"]>
<#if questionoption["OPType"]=='1'>
<#if question["QType"]=='1'>
<label>
<input class="quest-radio" type="radio" name=${"questions["+question_index+"].answer"} value=${questionoption.ID} <#if question["Required"]==0>datatype="*"</#if> />
${questionoption[language]}
</label>
</#if>
<#if question["QType"]=='2'>
<div>
<label>
<input class="quest-radio" type="radio" name=${"questions["+question_index+"].answer"} value=${questionoption.ID} <#if question["Required"]==0>datatype="*"</#if> />
${questionoption[language]}
</label>
</div>
</#if>
<#if question["QType"]=='3'>
<label>
<input class="quest-chekbox" type="checkbox" name=${"questions["+question_index+"].answer"} value=${questionoption.ID} <#if question["Required"]==0>datatype="*"</#if> />
${questionoption[language]}
</label>
</#if>
<#if question["QType"]=='4'>
<div>
<label>
<input class="quest-chekbox" type="checkbox" name=${"questions["+question_index+"].answer"} value=${questionoption.ID} <#if question["Required"]==0>datatype="*"</#if> />
${questionoption[language]}
</label>
</div>
</#if>
</#if>
<#if questionoption["OPType"]=='2'>
<input class="quest-input-another" name=${"questions["+question_index+"].answer"} type="text" value=${questionoption.Title} placeholder=${questionoption.Title} />
</#if>
</#if>
</#list>
<#if question["QType"]=='5'>
<input class="quest-input-another" name=${"questions["+question_index+"].answer"} type="text" <#if question["Required"]==0>datatype="*"</#if> />
</#if>
<#if question["QType"]=='6'>
<textarea class="quest-input-another" name=${"questions["+question_index+"].answer"} cols="" rows="" <#if question["Required"]==0>datatype="*"</#if>></textarea>
</#if>
</#list>
</#if>
<p class="quest-greet2">${questionnaire["Footer"]}</p>
<a href="javascript:;" <#if flag>οnclick="saveData();"class="question-yes"<#else>class="question-no"</#if>>提交</a>
</form>
</div>
</div>
</#if>
</body>
</html>
controller里面的保存到数据库的方法
@Controller
@RequestMapping("/questionnaire")
public class QuestionNaireController {
//这样页面的参数就可以一一映射到对象里面,可以通过对象获得参数数据
@RequestMapping(value = "save",method = RequestMethod.POST)
public String save(QuestionNaire questionNaire){
return "success";
}
}