easyui datagrid 获得焦点问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Editable DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="../jquery-1.6.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> var products = [ {productid:'FI-SW-01',name:'Koi'}, {productid:'K9-DL-01',name:'Dalmation'}, {productid:'RP-SN-01',name:'Rattlesnake'}, {productid:'RP-LI-02',name:'Iguana'}, {productid:'FL-DSH-01',name:'Manx'}, {productid:'FL-DLH-02',name:'Persian'}, {productid:'AV-CB-01',name:'Amazon Parrot'} ]; function productFormatter(value){ for(var i=0; i<products.length; i++){ if (products[i].productid == value) return products[i].name; } return value; } $(function(){ var lastIndex; $('#tt').datagrid({ toolbar:[{ text:'append', iconCls:'icon-add', handler:function(){ $('#tt').datagrid('endEdit', lastIndex); $('#tt').datagrid('appendRow',{ itemid:'', productid:'', listprice:'', unitprice:'', attr1:'', status:'P' }); var lastIndex = $('#tt').datagrid('getRows').length-1; $('#tt').datagrid('selectRow', lastIndex); $('#tt').datagrid('beginEdit', lastIndex); } },'-',{ text:'delete', iconCls:'icon-remove', handler:function(){ var row = $('#tt').datagrid('getSelected'); if (row){ var index = $('#tt').datagrid('getRowIndex', row); $('#tt').datagrid('deleteRow', index); } } },'-',{ text:'accept', iconCls:'icon-save', handler:function(){ $('#tt').datagrid('acceptChanges'); } },'-',{ text:'reject', iconCls:'icon-undo', handler:function(){ $('#tt').datagrid('rejectChanges'); } },'-',{ text:'GetChanges', iconCls:'icon-search', handler:function(){ var rows = $('#tt').datagrid('getChanges'); alert('changed rows: ' + rows.length + ' lines'); } }], onBeforeLoad:function(){ $(this).datagrid('rejectChanges'); }, onClickRow:function(rowIndex){ if (lastIndex != rowIndex){ $('#tt').datagrid('endEdit', lastIndex); $('#tt').datagrid('beginEdit', rowIndex); } lastIndex = rowIndex; } }); }); </script></head><body> <h2>Editable DataGrid</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"></div> <div>Click the row to start editing.</div> </div> <table id="tt" style="width:700px;height:auto" title="Editable DataGrid" iconCls="icon-edit" singleSelect="true" idField="itemid" url="datagrid_data2.json"> <thead> <tr> <th field="itemid" width="80">Item ID</th> <th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th> <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th> <th field="attr1" width="250" editor="text">Attribute</th> <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th> </tr> </thead> </table> </body></html>
onClickCell:function(rowIndex, field, value){ if(field == 'Attribute') $('#tt').datagrid('beginEdit', rowIndex); //这个是关键，触发开始编辑事件 }