easyui-datagrid 编辑单元格

古城微笑少年丶 2022-07-03 18:24 367阅读 0赞

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

页面效果是这样的：

![Center][]

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

![Center 1][]

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

![Center 2][]

如何实现的：

html：

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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"方法调用的时机。

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

原博客地址

http://blog.csdn.net/u011458469/article/details/51018878

[Link 1]: http://lib.csdn.net/base/mysql
[Center]: /images/20220618/ad409c50655349699d208c89f5da13d6.png
[Center 1]: /images/20220618/4d5fb096565c49d8a2801a8554683cd7.png
[Center 2]: /images/20220618/1cb1924e7ad54b63a5aa7f3a47d7e500.png
[view plain]: http://blog.csdn.net/u011458469/article/details/51018878#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1629569
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1629569/fork