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 }
原文地址：https://www.cnblogs.com/yshang/p/8119476.html
时间： 2024-10-07 07:47:30