1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="keywords" content="jquery,ui,easy,easyui,web">
6 <meta name="description" content="easyui help you build your web page easily!">
7 <title>DataGrid inline editing - jQuery EasyUI Demo</title>
8 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
9 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
10 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css">
11 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
12 <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
13 <script>
14 var data = {"total":28,"rows":[
15 {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
16 {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
17 {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
18 {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
19 {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
20 {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
21 {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
22 {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
23 {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
24 {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
25 ]};
26
27 var products = [
28 {productid:‘FI-SW-01‘,name:‘Koi‘},
29 {productid:‘K9-DL-01‘,name:‘Dalmation‘},
30 {productid:‘RP-SN-01‘,name:‘Rattlesnake‘},
31 {productid:‘RP-LI-02‘,name:‘Iguana‘},
32 {productid:‘FL-DSH-01‘,name:‘Manx‘},
33 {productid:‘FL-DLH-02‘,name:‘Persian‘},
34 {productid:‘AV-CB-01‘,name:‘Amazon Parrot‘}
35 ];
36 $(function(){
37 $(‘#tt‘).datagrid({
38 title:‘Editable DataGrid‘,
39 iconCls:‘icon-edit‘,
40 width:660,
41 height:250,
42 singleSelect:true,
43 idField:‘itemid‘,
44 data:data,
45 columns:[[
46 {field:‘itemid‘,title:‘Item ID‘,width:60},
47 {field:‘productid‘,title:‘Product‘,width:100,
48 formatter:function(value){
49 for(var i=0; i<products.length; i++){
50 if (products[i].productid == value) return products[i].name;
51 }
52 return value;
53 },
54 editor:{
55 type:‘combobox‘,
56 options:{
57 valueField:‘productid‘,
58 textField:‘name‘,
59 data:products,
60 required:true
61 }
62 }
63 },
64 {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘,editor:{type:‘numberbox‘,options:{precision:1}}},
65 {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘,editor:‘numberbox‘},
66 {field:‘attr1‘,title:‘Attribute‘,width:180,editor:‘text‘},
67 {field:‘status‘,title:‘Status‘,width:50,align:‘center‘,
68 editor:{
69 type:‘checkbox‘,
70 options:{
71 on: ‘P‘,
72 off: ‘‘
73 }
74 }
75 },
76 {field:‘action‘,title:‘Action‘,width:80,align:‘center‘,
77 formatter:function(value,row,index){
78 if (row.editing){
79 var s = ‘<a href="#" onclick="saverow(this)">Save</a> ‘;
80 var c = ‘<a href="#" onclick="cancelrow(this)">Cancel</a>‘;
81 return s+c;
82 } else {
83 var e = ‘<a href="#" onclick="editrow(this)">Edit</a> ‘;
84 var d = ‘<a href="#" onclick="deleterow(this)">Delete</a>‘;
85 return e+d;
86 }
87 }
88 }
89 ]],
90 onBeforeEdit:function(index,row){
91 row.editing = true;
92 updateActions(index);
93 },
94 onAfterEdit:function(index,row){
95 row.editing = false;
96 updateActions(index);
97 },
98 onCancelEdit:function(index,row){
99 row.editing = false;
100 updateActions(index);
101 }
102 });
103 });
104 function updateActions(index){
105 $(‘#tt‘).datagrid(‘updateRow‘,{
106 index: index,
107 row:{}
108 });
109 }
110 function getRowIndex(target){
111 var tr = $(target).closest(‘tr.datagrid-row‘);
112 return parseInt(tr.attr(‘datagrid-row-index‘));
113 }
114 function editrow(target){
115 $(‘#tt‘).datagrid(‘beginEdit‘, getRowIndex(target));
116 }
117 function deleterow(target){
118 $.messager.confirm(‘Confirm‘,‘Are you sure?‘,function(r){
119 if (r){
120 $(‘#tt‘).datagrid(‘deleteRow‘, getRowIndex(target));
121 }
122 });
123 }
124 function saverow(target){
125 $(‘#tt‘).datagrid(‘endEdit‘, getRowIndex(target));
126 }
127 function cancelrow(target){
128 $(‘#tt‘).datagrid(‘cancelEdit‘, getRowIndex(target));
129 }
130 function insert(){
131 var row = $(‘#tt‘).datagrid(‘getSelected‘);
132 if (row){
133 var index = $(‘#tt‘).datagrid(‘getRowIndex‘, row);
134 } else {
135 index = 0;
136 }
137 $(‘#tt‘).datagrid(‘insertRow‘, {
138 index: index,
139 row:{
140 status:‘P‘
141 }
142 });
143 $(‘#tt‘).datagrid(‘selectRow‘,index);
144 $(‘#tt‘).datagrid(‘beginEdit‘,index);
145 }
146 </script>
147 </head>
148 <body>
149 <h2>Editable DataGrid Demo</h2>
150 <div class="demo-info">
151 <div class="demo-tip icon-tip"> </div>
152 <div>Click the edit button on the right side of row to start editing.</div>
153 </div>
154
155 <div style="margin:10px 0">
156 <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
157 </div>
158
159 <table id="tt"></table>
160
161 </body>
162 </html>
1 {"total":28,"rows":[
2 {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
3 {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
4 {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
5 {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
6 {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
7 {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
8 {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
9 {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
10 {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
11 {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
12 ]}
时间： 2024-11-03 03:32:40