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');        }});                         $.ajaxif(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++) {//获取到了每个divvarx = 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，课程类型IdassessAndWeight.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转换为listListlist = (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";}