EasyUIEasyUI 启用行内编辑

创立数量网格(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. }

相关文章