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

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

看一个例子效果图:

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

代码如下:

  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

上一篇:pytest 自动化测试框架(二)


下一篇:pytest(五)用例传fixture参数