dategrid快速录入一行数据的一波操作

  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                              '200',
 22                             editor: {
 23                                 type: 'validatebox',
 24                                 options: {
 25                                     required: true
 26                                 }
 27                             }
 28                         }, {
 29                             field: 'name',
 30                             title: '商品名称',
 31                              '200',
 32                             editor: {
 33                                 type: 'validatebox',
 34                                 options: {
 35                                     required: true
 36                                 }
 37                             }
 38                         }, {
 39                             field: 'price',
 40                             title: '价格',
 41                              '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 }