EasyUI 启用行内编辑

创建数据网格（DataGrid）

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

为了启用数据网格行内编辑，您应该添加一个 editor 属性到列中。编辑器（editor）会告诉数据网格（datagrid）如何编辑字段及如何保存字段值。正如您所看到的，我们定义的三个编辑器（editor）：text、combobox 和 checkbox。

1. function getRowIndex(target){
2. var tr = $(target).closest('tr.datagrid-row');
3. return parseInt(tr.attr('datagrid-row-index'));
4. }
5. function editrow(target){
6. $('#tt').datagrid('beginEdit', getRowIndex(target));
7. }
8. function deleterow(target){
9. $.messager.confirm('Confirm','Are you sure?',function(r){
10. if (r){
11. $('#tt').datagrid('deleteRow', getRowIndex(target));
12. }
13. });
14. }
15. function saverow(target){
16. $('#tt').datagrid('endEdit', getRowIndex(target));
17. }
18. function cancelrow(target){
19. $('#tt').datagrid('cancelEdit', getRowIndex(target));
20. }