1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>表格的行数据录入效果的实现</title> 7 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 8 <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script> 9 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script> 10 <script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script> 11 <link rel="stylesheet" href="../js/easyui/themes/icon.css" /> 12 <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" /> 13 <link rel="stylesheet" href="../js/ztree/zTreeStyle.css" /> 14 <script type="text/javascript"> 15 $(function() { 16 $("#tabs").datagrid({ 17 columns: [ 18 [{ 19 field: ‘id‘, 20 title: ‘编号‘, 21 width: ‘200‘, 22 editor: { 23 type: ‘validatebox‘, 24 options: { 25 required: true 26 } 27 } 28 }, { 29 field: ‘name‘, 30 title: ‘商品名称‘, 31 width: ‘200‘, 32 editor: { 33 type: ‘validatebox‘, 34 options: { 35 required: true 36 } 37 } 38 }, { 39 field: ‘price‘, 40 title: ‘价格‘, 41 width: ‘200‘, 42 editor: { 43 type: ‘validatebox‘, 44 options: { 45 required: true 46 } 47 } 48 }] 49 ], 50 toolbar: [{ 51 id: ‘add‘, 52 text: ‘添加一行数据‘, 53 iconCls: ‘icon-add‘, 54 handler: function() { 55 $("#tabs").datagrid(‘appendRow‘, { 56 id: 4, 57 name: ‘可可‘, 58 price: 9000 59 }); 60 } 61 }, { 62 id: ‘save‘, 63 text: ‘保存修改‘, 64 iconCls: ‘icon-save‘, 65 handler: function() { 66 $("#tabs").datagrid(‘endEdit‘, currentEditIndex); 67 currentEditIndex = undefined; 68 } 69 }, { 70 id: ‘edit‘, 71 text: ‘修改整行‘, 72 iconCls: ‘icon-edit‘, 73 handler: function() { 74 if(currentEditIndex != undefined) { 75 //正在编辑行数据 76 return; 77 } 78 var row = $("#tabs").datagrid(‘getSelected‘); 79 var index = $("#tabs").datagrid(‘getRowIndex‘, row); 80 $("#tabs").datagrid(‘beginEdit‘, index); 81 //获取到全局变量 82 currentEditIndex = index; 83 } 84 }, { 85 id: ‘cancel‘, 86 text: ‘撤销修改‘, 87 iconCls: ‘icon-cancel‘, 88 handler: function() { 89 $("#tabs").datagrid(‘cancelEdit‘, currentEditIndex); 90 currentEditIndex = undefined; 91 } 92 }, { 93 id: ‘delete‘, 94 text: ‘删除整行‘, 95 iconCls: ‘icon-no‘, 96 handler: function() { 97 var row = $("#tabs").datagrid(‘getSelected‘); 98 var index = $("#tabs").datagrid(‘getRowIndex‘, row); 99 $("#tabs").datagrid(‘deleteRow‘, index); 100 } 101 }, { 102 id: ‘add‘, 103 text: ‘添加第一行的数据‘, 104 iconCls: ‘icon-add‘, 105 handler: function() { 106 $("#tabs").datagrid(‘insertRow‘, { 107 index: 0, // 索引从0开始 108 row: {} 109 }); 110 //处于开始编辑的状态 111 $("#tabs").datagrid(‘beginEdit‘,0); 112 currentEditIndex = 0; 113 } 114 }], 115 onBeforeEdit:function(rowIndex, rowData){ 116 //在修改数据之前进行的操作 117 }, 118 onAfterEdit:function(rowIndex, rowData, changes){ 119 //在保存了修改的内容之后的事件 120 currentEditIndex = undefined; 121 }, 122 onCancelEdit:function(rowIndex, rowData){ 123 //在撤销修改之后的事件 124 currentEditIndex = undefined; 125 }, 126 url: ‘product.json‘, 127 singleSelect: true 128 }); 129 //声明全局变量 130 var currentEditIndex; 131 }); 132 </script> 133 </head> 134 135 <body> 136 <table id="tabs" width="400px"> 137 138 </table> 139 </body> 140 141 </html>
附录:
product.json的数据格式展示：
1 { 2 "total": 100, 3 "rows": [ 4 { 5 "id": 1, 6 "name": "冰箱", 7 "price": 1000 8 }, { 9 "id": 2, 10 "name": "电视", 11 "price": 2000 12 }, { 13 "id": 3, 14 "name": "笔记本", 15 "price": 4000 16 } 17 ] 18 }