easyui-datagrid 编辑单元格

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

         页面效果是这样的:

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

输入数据,并失去焦点之后:

 

如何实现的:

html:

 

[html] view plain copy

 

  1.     style="width: 100%; height: 90%">  
  2.       
  3.   
  4.   

 

生成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.   
  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.   


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

 

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

你可能感兴趣的:(easyUI)