easyui-datagrid 编辑单元格

在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，并且把输入的期末成绩和计算的总成绩更新到数据库中。主要应用了单击单元格进行编辑，编辑完成之后，失去焦点则保存数据。如果数据没有变化，失去焦点则不更新数据库。

         页面效果是这样的：

期末成绩的单元格是可以编辑的：

输入数据，并失去焦点之后：

 

如何实现的：

html：

 

[html] view plain copy

 

1. <table id="dg" title="学生作业" class="easyui-datagrid"  
2.     style="width: 100%; height: 90%">  
3.       
4.   
5. </table>  

 

生成easyUI-datagrid表格的js：

 

[javascript] view plain copy

 

1. $('#dg').datagrid({      
2.         url:'${pageContext.request.contextPath}/queryStudentAnswer',   
3.         queryParams:{"schoolcalendarId":termId},  
4.         onClickCell: onClickCell,  
5.         onAfterEdit:onAfterEdit,  
6.         rownumbers:true,  
7.         pagination:'true',  
8.         fitColumns:'true',  
9.         singleSelect:'true',  
10.         columns:[[      
11.            /*  {field:'ck',checkbox:true},    */   
12.             {field:'id',hidden:true},      
13.             {field:'studentId',hidden:true},      
14.             {field:'resultId',hidden:true},      
15.             {field:'daliyResultRate',hidden:true},      
16.             {field:'daliyResult',hidden:true},      
17.             {field:'code',width:30,align:'center',title:'学号'},    
18.             {field:'name',width:30,align:'center',title:'姓名'},     
19.             {field:'teachClassName',width:30,align:'center',title:'班级'}  ,   
20.             {field:'questionTime',width:40,align:'center',title:'留作业时间'},     
21.             {field:'questionName',width:50,align:'center',title:'作业名称'},     
22.             {field:'answerName',width:50,align:'center',title:'答案名称'},     
23.             {field:'preview',width:30,align:'center',title:'预览',formatter: function (value, row, index) { return preview(value, row, index)}} ,    
24.             {field:'finalRate',width:30,align:'center',title:'期末成绩比例'} ,    
25.             {field:'finalResult',editor:'text',width:30,align:'center',title:'期末成绩'} ,    
26.             {field:'totalResult',width:30,align:'center',title:'总分'}   
27.         ]]      
28.     });   

（注意期末成绩这个字段的“editor”属性应该设置成“text”，这样才可以执行下面的方法）
 

 

单击单元格和失去焦点，提交数据的js：

 

[javascript] view plain copy

 

1. <script type="text/javascript">  
2.   
3. var editIndex = undefined;  
4. function endEditing() {//该方法用于关闭上一个焦点的editing状态  
5.     if (editIndex == undefined) {  
6.         return true  
7.     }  
8.     if ($('#dg').datagrid('validateRow', editIndex)) {  
9.         $('#dg').datagrid('endEdit', editIndex);  
10.         editIndex = undefined;  
11.         return true;  
12.     } else {  
13.         return false;  
14.     }  
15. }  
16. //点击单元格事件：  
17. function onClickCell(index,field,value) {  
18.     if (endEditing()) {  
19.         if(field=="finalResult"){  
20.             $(this).datagrid('beginEdit', index);  
21.             var ed = $(this).datagrid('getEditor', {index:index,field:field});  
22.             $(ed.target).focus();  
23.         }         
24.         editIndex = index;  
25.     }  
26.     $('#dg').datagrid('onClickRow')  
27. }  
28. //单元格失去焦点执行的方法  
29. function onAfterEdit(index, row, changes) {  
30.     var updated = $('#dg').datagrid('getChanges', 'updated');  
31.     if (updated.length < 1) {  
32.         editRow = undefined;  
33.         $('#dg').datagrid('unselectAll');  
34.         return;  
35.     } else {  
36.         // 传值  
37.         submitForm(index, row, changes);  
38.     }  
39.   
40.       
41. }  
42.   
43. //提交数据  
44. function submitForm(index, row, changes) {  
45. //  alert( row.resultId+"--"+changes.finalResult)daliyResultRate;  
46.     var resultId=row.resultId;//成绩id  
47.     if(resultId==""){  
48.         $.messager.alert('提醒', '没有录入该学生平时成绩！');  
49.         $("#dg").datagrid('reload');  
50.         return;  
51.     }  
52.     var daliyResultRate=row.daliyResultRate;//平时成绩比例  
53.     var daliyResult=row.daliyResult;//平时成绩  
54.     var finalRate=row.finalRate;//期末比例  
55.     var finalRusult=changes.finalResult;//期末成绩  
56.     var r =/^-?[1-9]/;//判断输入的是正整数  
57.     if(!r.test(finalRusult)){  
58.         $.messager.alert('提醒', '请输入正整数！');  
59.         return;  
60.     }  
61.     var totalRusult=Math.round(daliyResultRate*daliyResult+finalRate*finalRusult);//总成绩  
62.     $.ajax({  
63.             type : "get",  
64.             async : false,  
65.             url : "${pageContext.request.contextPath}/updateResult",  
66.             data : {  
67.                 "resultId" : resultId,  
68.                 "finalResult" : finalRusult,  
69.                 "totalResult":totalRusult  
70.             },  
71.             success : function(data) {  
72.                 if(data==true){  
73.                     //alert("保存成功");  
74.                     $("#dg").datagrid('reload');  
75.                 }  
76.             }  
77.         })  
78. }  
79. </script>  

特别注意的是单元格的"beginEdit"和"endEdit"方法调用的时机。

 

这样就可以实现了单元格编辑保存的效果了。