标签：date editable dex dal line price tree height amazon
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 ]}
标签：date editable dex dal line price tree height amazon
原文地址：http://www.cnblogs.com/cxxjohnson/p/6974139.html
