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="/easyui/jquery-easyui-1.4/themes/default/easyui.css"> 9 <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/themes/icon.css"> 10 <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/demo/demo.css"> 11 <script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.min.js"></script> 12 <script type="text/javascript" src="/easyui/jquery-easyui-1.4/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 660, 41 height:250, 42 singleSelect:true, 43 idField:'itemid', 44 data:data, 45 columns:[[ 46 {field:'itemid',title:'Item ID',60}, 47 {field:'productid',title:'Product',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',80,align:'right',editor:{type:'numberbox',options:{precision:1}}}, 65 {field:'unitcost',title:'Unit Cost',80,align:'right',editor:'numberbox'}, 66 {field:'attr1',title:'Attribute',180,editor:'text'}, 67 {field:'status',title:'Status',50,align:'center', 68 editor:{ 69 type:'checkbox', 70 options:{ 71 on: 'P', 72 off: '' 73 } 74 } 75 }, 76 {field:'action',title:'Action',80,align:'center', 77 formatter:function(value,row,index){ 78 if (row.editing){ 79 var s = '<a href="#" onclick="saverow(this,'+ index +')">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,'+ index +')">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 { 92 row.editing = true; 93 updateActions(index); 94 }, 95 onAfterEdit:function(index,row) 96 { 97 row.editing = false; 98 updateActions(index); 99 }, 100 onCancelEdit:function(index,row) 101 { 102 row.editing = false; 103 updateActions(index); 104 } 105 }); 106 }); 107 function updateActions(index) 108 { 109 $('#tt').datagrid('updateRow',{ 110 index: index, 111 row:{} 112 }); 113 } 114 115 function getRowIndex(target) 116 { 117 var tr = $(target).closest('tr.datagrid-row'); 118 return parseInt(tr.attr('datagrid-row-index')); 119 } 120 121 function editrow(target, index) 122 { 123 $('#tt').datagrid('beginEdit', getRowIndex(target)); 124 125 $("#tt").attr('refreshRow',11); 126 } 127 128 function deleterow(target) 129 { 130 $.messager.confirm('Confirm','Are you sure?',function(r){ 131 if (r){ 132 $('#tt').datagrid('deleteRow', getRowIndex(target)); 133 } 134 }); 135 } 136 137 function saverow(target, index) 138 { 139 $('#tt').datagrid('endEdit', getRowIndex(target)); 140 141 var row = $("#tt").datagrid("getRows"); 142 console.log(row[index]); 143 } 144 145 function cancelrow(target) 146 { 147 $('#tt').datagrid('cancelEdit', getRowIndex(target)); 148 } 149 150 function insert() 151 { 152 var row = $('#tt').datagrid('getSelected'); 153 if (row){ 154 var index = $('#tt').datagrid('getRowIndex', row); 155 } else { 156 index = 0; 157 } 158 $('#tt').datagrid('insertRow', { 159 index: index, 160 row:{ 161 status:'P' 162 } 163 }); 164 $('#tt').datagrid('selectRow',index); 165 $('#tt').datagrid('beginEdit',index); 166 } 167 </script> 168 </head> 169 <body> 170 <h2>Editable DataGrid Demo</h2> 171 <div class="demo-info"> 172 <div class="demo-tip icon-tip"> </div> 173 <div>Click the edit button on the right side of row to start editing.</div> 174 </div> 175 176 <div style="margin:10px 0"> 177 <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a> 178 </div> 179 180 <table id="tt"></table> 181 182 </body> 183 </html>