spring-mvc（二）前台easyui到后台传值

简介

 

这里是在做项目时对于easyui和springmvc结合的一个小结，主要涉及的还是前台ajax到后台传值处理的一些东西。

 

1.基本的表格分页显示及可编辑的表格

 

<tableid="template_questiontype"class="easyui-datagrid"title="细化题型" style="height:auto;"
data-options="pagination:true,pageSize:5,pageList:[5,10,15,20],singleSelect:false,collapsible:true,method:'post',onClickCell:onClickCell">
<thead>
<tr>
<thdata-options="field:'choose',checkbox:true,width:130,align:'center'"></th>
<thdata-options="field:'id',width:230,align:'center'"hidden="true">id隐藏</th>
<thdata-options="field:'questionTypeName',width:230,align:'center'">题型</th>
<thdata-options="field:'questionType_Score',width:230,align:'center',editor:'text'">题型分值</th>
<thdata-options="field:'questionType_order',width:230,align:'center',editor:'text'">题型顺序</th>
</tr>        
</thead>
</table>

 

分页显示的几个注意属性：pagination:true,pageSize:5,pageList:[5,10,15,20]，分别是是否显示分页，以及初始页面大小和显示分页数。

2.Js-控制单元格可修改

 

<!--控制单元格可修改-陈方林-2015-01-16-->
<scripttype="text/javascript">
$.extend($.fn.datagrid.methods,{
editCell:function(jq,param){
returnjq.each(function(){
varopts =$(this).datagrid('options');
varfields=$(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(vari=0; i<fields.length;i++){
varcol =$(this).datagrid('getColumnOption', fields[i]);
col.editor1= col.editor;
if(fields[i] != param.field){
col.editor= null;
}
}
$(this).datagrid('beginEdit',param.index);
for(vari=0; i<fields.length;i++){
varcol =$(this).datagrid('getColumnOption', fields[i]);
col.editor= col.editor1;
}
});
}
});
 
vareditIndex = undefined;
functionendEditing(){
if(editIndex == undefined){returntrue}
if($('#template_questiontype').datagrid('validateRow',editIndex)){
$('#template_questiontype').datagrid('endEdit',editIndex);
editIndex= undefined;
returntrue;
}else {
returnfalse;
}
}
functiononClickCell(index, field){
if(endEditing()){
$('#template_questiontype').datagrid('selectRow',index)
.datagrid('editCell',{index:index,field:field});
editIndex= index;
}
}
</script>

 

弹出框

<divid="editTempletdlg"class="easyui-dialog" title="编辑模板"</div>
<a href="javascript:void(0)"class="easyui-linkbutton" style="padding-left:12px;padding-right:12px;"
onclick="$('#editTempletdlg').dialog('close')">取   消</a>

 

3.ajax传值

get方式提交到url

$.ajax({
type: "get",
url:"${pageContext.request.contextPath}/exam/save",
data:{
"departmentId":departmentId,
"courseid":courseid,
"examName":examName,
"setDuration":setDuration,
"beginDate":beginDate,
"endDate":endDate,
"examType":examType,
"timePattern":timePattern,
"extractQuestionType":extractQuestionType        
},
dataType:"text",
success: function(result) {
if(result=="success"){
alert('添加考試信息，成功！')                                                
$('#addExamdlg').dialog('close');
$('#dg').datagrid('reload');
}else{
alert('添加考試信息，失敗！')
$('#dg').datagrid('reload');
}
}
});
 

jquery提交表单

$('#templetInfo').form('submit',{
url: url,
type:"POST",
dataType:"JSON",
onSubmit: function() {
return$(this).form('validate');
},
success: function(rs1)
{        
//varrs1 = eval('('+rs1+')');
alert(rs1);
alert("添加成功！");
$('#addTempletdlg').dialog('close');
$('#getDegreeScores').dialog('open');        
//$("#dg_addtemplet_second").datagrid('reload');        
}
});                        
 
$.ajax
if(templets.length!=0){
$.messager.confirm('提示','你确定要删除这条信息吗？',function(r) {
$.ajax({
type: "get",
url:"${pageContext.request.contextPath}/deleteTempletMainByID?templetIds="+templets,                
data:{},
dataType:"text",
success: function(result) {
if(result=="success"){
  alert('恭喜您，信息删除成功！')
  $('#dg').datagrid('reload');
}else{
        alert('信息删除失败！')
        $('#dg').datagrid('reload');                                                                        
}
        }
});
 
});
}else{
alert('请选中要删除的信息！')
}
 

4.前台显示jstl 遍历list集合

<%--<c:forEachitems="${scoreDistributionS}" var="s">
<c:outvalue="${s.degree}"></c:out>                                                
</c:forEach>
<%    List<ScoreDistribution>scoreDistributionSs =(List<ScoreDistribution>)request.getAttribute("scoreDistributionS");    
  if(scoreDistributionS !=null) {        
for(inti = 0; i <scoreDistributionS.size(); i++) {
scoreDistributionS.get(i);%>            
<tr>                
<tdvalue="scoreDistributionS.get(i).score"/>                
<tdvalue="scoreDistributionS.get(i).degree"/>                
<th>test${scoreDistributionS.get(i).score}</th>
</tr><%                    
}     } %>
 --%>
<%    List<ScoreDistribution>scoreDistributionS =(List<ScoreDistribution>)request.getAttribute("scoreDistributionS");    
  if(scoreDistributionS !=null) {        
for(inti = 0; i <scoreDistributionS.size(); i++) {
scoreDistributionS.get(i);%>            
<tr>                
<tdvalue="scoreDistributionS.get(i).score"/>                
<tdvalue="scoreDistributionS.get(i).degree"/>                
      
</tr><%                    
}     } %>

 

 

5.前台json数组到后台转实体对象集合

//这是变量数组
varassessAndWeightList = [];
//确定外边大循环的次数
vartrlength =$("tr:gt(0)").length;
for(i = 1; i <= trlength + 1;i++) {
//获取到了每个div
varx = document.getElementById(i);
//获取某个div下面的input数量，然后循环
varradioCount =x.getElementsByTagName("input").length;
for(j = 0; j < radioCount; j++){
//判断哪个input被选中了
if(x.getElementsByTagName("input")[j].checked== true) {
//获取到所选择的radio的值
//定义一个对象变量：
assessAndWeight= new Object();
varweightId =x.getElementsByTagName("input")[j].value;
varassessId =x.getElementsByTagName("input")[j].name;
assessAndWeight.assessId= assessId;
assessAndWeight.weightId= weightId;
//获取学生id，教师Id，课程Id，课程类型Id
assessAndWeight.templateId=document.getElementById("templateId").value;
assessAndWeight.studentId=document.getElementById("studentId").value;
assessAndWeight.teacherId=document.getElementById("teacherId").value;
assessAndWeight.courseId=document.getElementById("courseId").value;
assessAndWeight.courseType=document.getElementById("courseTypeId").value;
//将被选中的连同考核项目Id一起放入数组中去。
assessAndWeightList.push(assessAndWeight);
}
}
}
//将获取对象集合转成Json对象结合
//varstringResult=assessAndWeightList.serializeArray();
varstringResult =JSON.stringify(assessAndWeightList);
//alert(stringResult);
varifPj=document.getElementById("ifPj").value;
$.ajax({
type: "post",
url:"studentAssessResult",
data: {
stringResult: stringResult,
IfPj:ifPj
},
datatype: "json",
success: function(data) {
$.messager.alert("提示", "学生评教成功！","Info");
 window.location.href="http://192.168.24.128:8080/itoo-assess-studentassess-web/studentAssess";
},
error: function(data) {
$.messager.alert("警告", "网络故障！","error");
}
})

pom.xml引用的jar，这里项目主要还是用的是maven来管理jar，所以这里需要配置一下jar的坐标

<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>

处理器：

@RequestMapping("/studentAssessResult")
publicStringstudentAssessResult(HttpServletRequest request,
HttpServletResponseresponse) {
try{
// 获取传递的Json组
StringjsonResultString =request.getParameter("stringResult");
// 获取传递的Json组
StringIfPj =request.getParameter("IfPj");
// 将Json组转成Json对象
JSONArrayjsonarray =JSONArray.fromObject(jsonResultString);
// 将学生评价结果json转换为list
Listlist = (List)JSONArray.toCollection(jsonarray,StudentAssessResult.class);
studentAssessResultBean.saveEntitys(list);                        
//更新是否评教字段                        
StudentTeachClassstudentTeachClass=schoolTeachingBean.findEntityById(IfPj);
studentTeachClass.setId(IfPj);
studentTeachClass.setIsPj("是");                        
schoolTeachingBean.updateIsPjOrIsKs(studentTeachClass);
// 更新是否评教字段}
catch(Exception e) {
throwe;
}
return"/studentAssess";
}