1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="UTF-8">
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
| <title>Row Editing DataGrid - jQuery EasyUI Mobile Demo</title>
| <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
| <link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
| <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
| <script type="text/javascript" src="../../jquery.min.js"></script>
| <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
| <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
| </head>
| <body>
| <table id="dg" data-options="
| header:'#hh',
| iconCls: 'icon-edit',
| singleSelect: true,
| fit:true,
| fitColumns:true,
| border: false,
| scrollbarSize: 0,
| data: data,
| onClickRow: onClickRow
| ">
| <thead>
| <tr>
| <th data-options="field:'itemid',width:80">Item ID</th>
| <th data-options="field:'productid',width:100,editor:'textbox'">Product</th>
| <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
| <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
| </tr>
| </thead>
| </table>
| <div id="hh">
| <div class="m-toolbar">
| <div class="m-title">Row Editing</div>
| <div class="m-right">
| <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"></a>
| <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"></a>
| <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"></a>
| </div>
| </div>
| </div>
|
| <script type="text/javascript">
| var data = [
| {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
| {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
| {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
| {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
| {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
| {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
| {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
| {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
| {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
| {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
| ];
| $(function(){
| $('#dg').datagrid({
| data: data
| });
| });
|
| var editIndex = undefined;
| function endEditing(){
| if (editIndex == undefined){return true}
| if ($('#dg').datagrid('validateRow', editIndex)){
| $('#dg').datagrid('endEdit', editIndex);
| editIndex = undefined;
| return true;
| } else {
| return false;
| }
| }
| function onClickRow(index){
| if (editIndex != index){
| if (endEditing()){
| $('#dg').datagrid('selectRow', index)
| .datagrid('beginEdit', index);
| editIndex = index;
| } else {
| $('#dg').datagrid('selectRow', editIndex);
| }
| }
| }
| function removeit(){
| if (editIndex == undefined){return}
| $('#dg').datagrid('cancelEdit', editIndex)
| .datagrid('deleteRow', editIndex);
| editIndex = undefined;
| }
| function accept(){
| if (endEditing()){
| $('#dg').datagrid('acceptChanges');
| }
| }
| function reject(){
| $('#dg').datagrid('rejectChanges');
| editIndex = undefined;
| }
| </script>
| </body>
| </html>
|
|
