在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，并且把输入的期末成绩和计算的总成绩更新到数据库中。主要应用了单击单元格进行编辑，编辑完成之后，失去焦点则保存数据。如果数据没有变化，失去焦点则不更新数据库。
页面效果是这样的：
期末成绩的单元格是可以编辑的：
输入数据，并失去焦点之后：
如何实现的：
|
1 2 3 4 5 |
<table id="dg" title="学生作业" class="easyui-datagrid" style="width: 100%; height: 90%"> </table> |
生成easyUI-datagrid表格的js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$('#dg').datagrid({ url:'${pageContext.request.contextPath}/queryStudentAnswer', queryParams:{"schoolcalendarId":termId}, onClickCell: onClickCell, onAfterEdit:onAfterEdit, rownumbers:true, pagination:'true', fitColumns:'true', singleSelect:'true', columns:[[ /* {field:'ck',checkbox:true}, */ {field:'id',hidden:true}, {field:'studentId',hidden:true}, {field:'resultId',hidden:true}, {field:'daliyResultRate',hidden:true}, {field:'daliyResult',hidden:true}, {field:'code',width:30,align:'center',title:'学号'}, {field:'name',width:30,align:'center',title:'姓名'}, {field:'teachClassName',width:30,align:'center',title:'班级'} , {field:'questionTime',width:40,align:'center',title:'留作业时间'}, {field:'questionName',width:50,align:'center',title:'作业名称'}, {field:'answerName',width:50,align:'center',title:'答案名称'}, {field:'preview',width:30,align:'center',title:'预览',formatter: function (value, row, index) { return preview(value, row, index)}} , {field:'finalRate',width:30,align:'center',title:'期末成绩比例'} , {field:'finalResult',editor:'text',width:30,align:'center',title:'期末成绩'} , {field:'totalResult',width:30,align:'center',title:'总分'} ]] }); |
（注意期末成绩这个字段的“editor”属性应该设置成“text”，这样才可以执行下面的方法）
单击单元格和失去焦点，提交数据的js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<script type="text/javascript"> var editIndex = undefined; function endEditing() {//该方法用于关闭上一个焦点的editing状态 if (editIndex == undefined) { return true } if ($('#dg').datagrid('validateRow', editIndex)) { $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } //点击单元格事件： function onClickCell(index,field,value) { if (endEditing()) { if(field=="finalResult"){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } editIndex = index; } $('#dg').datagrid('onClickRow') } //单元格失去焦点执行的方法 function onAfterEdit(index, row, changes) { var updated = $('#dg').datagrid('getChanges', 'updated'); if (updated.length < 1) { editRow = undefined; $('#dg').datagrid('unselectAll'); return; } else { // 传值 submitForm(index, row, changes); } } //提交数据 function submitForm(index, row, changes) { // alert( row.resultId+"--"+changes.finalResult)daliyResultRate; var resultId=row.resultId;//成绩id if(resultId==""){ $.messager.alert('提醒', '没有录入该学生平时成绩！'); $("#dg").datagrid('reload'); return; } var daliyResultRate=row.daliyResultRate;//平时成绩比例 var daliyResult=row.daliyResult;//平时成绩 var finalRate=row.finalRate;//期末比例 var finalRusult=changes.finalResult;//期末成绩 var r =/^-?[1-9]/;//判断输入的是正整数 if(!r.test(finalRusult)){ $.messager.alert('提醒', '请输入正整数！'); return; } var totalRusult=Math.round(daliyResultRate*daliyResult+finalRate*finalRusult);//总成绩 $.ajax({ type : "get", async : false, url : "${pageContext.request.contextPath}/updateResult", data : { "resultId" : resultId, "finalResult" : finalRusult, "totalResult":totalRusult }, success : function(data) { if(data==true){ //alert("保存成功"); $("#dg").datagrid('reload'); } } }) } </script> |
特别注意的是单元格的”beginEdit”和”endEdit”方法调用的时机。
这样就可以实现了单元格编辑保存的效果了。