dategrid快速錄入一行數據的一波操作
阿新 • • 發佈：2017-12-26
ons sele 正在 eas append 快速 edi set add
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 }
dategrid快速錄入一行數據的一波操作