简介
这里是在做项目时对于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";
}