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

Posted 帅娃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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                             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快速录入一行数据的一波操作的主要内容,如果未能解决你的问题,请参考以下文章

035 工作单快速录入 - bos

EasyUI:获取某个dategrid的所有行数据

iFrame中dateGrid中数据不显示

easyui清除dategrid所有数据(模拟本地加载)

jmeter可以批量录入数据吗?如果可以怎么操作?

排序--快速排序