jquery-easyui中表格的行编辑功能

datagrid现在具有行编辑能力了，使用时只须在columns中为需要编辑的列添加一个editor属性，编辑保存时同时具有数据校验能力。

看一个例子效果图：

代码如下：

1. $('#tt').datagrid({
2. title:'Editable DataGrid',
3. iconCls:'icon-edit',
4. width:660,
5. height:250,
6. singleSelect:true,
7. idField:'itemid',
8. url:'datagrid_data.json',
9. columns:[[
10. {field:'itemid',title:'Item ID',width:60},
11. {field:'productid',title:'Product',width:100,
12. formatter:function(value){
13. for(var i=0; i<products.length; i++){
14. if (products[i].productid == value) return products[i].name;
15. }
16. return value;
17. },
18. editor:{
19. type:'combobox',
20. options:{
21. valueField:'productid',
22. textField:'name',
23. data:products,
24. required:true
25. }
26. }
27. },
28. {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
29. {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
30. {field:'attr1',title:'Attribute',width:150,editor:'text'},
31. {field:'status',title:'Status',width:50,align:'center',
32. editor:{
33. type:'checkbox',
34. options:{
35. on: 'P',
36. off: ''
37. }
38. }
39. },
40. {field:'action',title:'Action',width:70,align:'center',
41. formatter:function(value,row,index){
42. if (row.editing){
43. var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';
44. var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';
45. return s+c;
46. } else {
47. var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';
48. var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';
49. return e+d;
50. }
51. }
52. }
53. ]],
54. onBeforeEdit:function(index,row){
55. row.editing = true;
56. $('#tt').datagrid('refreshRow', index);
57. },
58. onAfterEdit:function(index,row){
59. row.editing = false;
60. $('#tt').datagrid('refreshRow', index);
61. },
62. onCancelEdit:function(index,row){
63. row.editing = false;
64. $('#tt').datagrid('refreshRow', index);
65. }
66. });

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:datagrid12