[转载]jQuery EasyUI:Enable DataGrid Inline Editing

[转载]Enable DataGrid Inline Editing – jQuery EasyUI.

Tutorial » Enable DataGrid Inline Editing

The editable feature was recently added to the datagrid. It enable the user to add a new row to the datagrid. The user may also update one or more rows.

This tutorial shows how to create a datagrid with inline editing.

View Demo

Create 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(‘+index+‘)”>Save</a> ‘;
  45. var c = ‘<a href=”#” onclick=”cancelrow(‘+index+‘)”>Cancel</a>’;
  46. return s+c;
  47. else {
  48. var e = ‘<a href=”#” onclick=”editrow(‘+index+‘)”>Edit</a> ‘;
  49. var d = ‘<a href=”#” onclick=”deleterow(‘+index+‘)”>Delete</a>’;
  50. return e+d;
  51. }
  52. }
  53. }
  54. ]],
  55. onBeforeEdit:function(index,row){
  56. row.editing = true;
  57. updateActions();
  58. },
  59. onAfterEdit:function(index,row){
  60. row.editing = false;
  61. updateActions();
  62. },
  63. onCancelEdit:function(index,row){
  64. row.editing = false;
  65. updateActions();
  66. }
  67. });
  68. });
  69. function updateActions(){
  70. var rowcount = $(‘#tt’).datagrid(‘getRows’).length;
  71. for(var i=0; i<rowcount; i++){
  72. $(‘#tt’).datagrid(‘updateRow’,{
  73. index:i,
  74. row:{action:}
  75. });
  76. }
  77. }

To enable editing in datagrid, you should add a editor property to the columns. The editor tells datagrid how to edit the field and how to save the field value. As you can see we define three editor:text,combobox and checkbox.

  1. function editrow(index){
  2. $(‘#tt’).datagrid(‘beginEdit’, index);
  3. }
  4. function deleterow(index){
  5. $.messager.confirm(‘Confirm’,‘Are you sure?’,function(r){
  6. if (r){
  7. $(‘#tt’).datagrid(‘deleteRow’, index);
  8. }
  9. });
  10. }
  11. function saverow(index){
  12. $(‘#tt’).datagrid(‘endEdit’, index);
  13. }
  14. function cancelrow(index){
  15. $(‘#tt’).datagrid(‘cancelEdit’, index);
  16. }

Download the EasyUI example:



赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏