JqGrid設置專注於SelectRow無法正常工作

我有一個jqgrid，我需要關注單擊單元格而不是第一個可編輯單元格，當用戶單擊一行中的單元格時。JqGrid設置專注於SelectRow無法正常工作

我使用的是oleg發佈的這段代碼，但它沒有關注所選單元格。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>http://stackoverflow.com/questions/6536654/how-to-edit-the-selected-cell-on-jqgrid/6538102#6538102</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/redmond/jquery-ui.css" /> 
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script> 
    <script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src.js"></script> 

    <script type="text/javascript"> 
    //<![CDATA[ 
     $(document).ready(function() { 
      'use strict'; 
      var mydata = [ 
        {id:"1", invdate:"2007-10-01",name:"test", note:"note", amount:"200.00",tax:"10.00",closed:true, ship_via:"TN",total:"210.00"}, 
        {id:"2", invdate:"2007-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
        {id:"3", invdate:"2007-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"}, 
        {id:"4", invdate:"2007-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"}, 
        {id:"5", invdate:"2007-10-31",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
        {id:"6", invdate:"2007-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"}, 
        {id:"7", invdate:"2007-10-04",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"}, 
        {id:"8", invdate:"2007-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"}, 
        {id:"9", invdate:"2007-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN",total:"430.00"}, 
        {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"}, 
        {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}, 
        {id:"12",invdate:"2007-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"} 
       ], 
       grid = $("#list"), lastSel = -1; 

      grid.jqGrid({ 
       datatype:'local', 
       data: mydata, 
       colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'], 
       colModel:[ 
        {name:'id',index:'id',width:70,align:'center',sorttype:'int',hidden:true}, 
        {name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date', 
        formatter:'date',formatoptions: {newformat:'m/d/Y'},datefmt:'m/d/Y'}, 
        {name:'name',index:'name',width:70,editable:true}, 
        {name:'amount',index:'amount',width:70,formatter:'number',align:'right',editable:true}, 
        {name:'tax',index:'tax',width:50,formatter:'number',align:'right',editable:true}, 
        {name:'total',index:'total',width:60, formatter:'number',align:'right',editable:true}, 
        {name:'closed',index:'closed',width:60,align:'center',editable:true, 
        formatter:'checkbox',edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}}, 
        {name:'ship_via',index:'ship_via',width:90,align:'center',formatter:'select',editable:true, 
        edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'}}, 
        {name:'note',index:'note',width:70,sortable:false,editable:true} 
       ], 
       rowNum:10, 
       rowList:[5,10,20], 
       pager: '#pager', 
       gridview:true, 
       rownumbers:true, 
       sortname: 'invdate', 
       viewrecords: true, 
       sortorder: 'desc', 
       caption:'Just simple local grid', 
       height: '100%', 
       editurl: 'clientArray', 
       beforeSelectRow: function(rowid) { 
        if (rowid !== lastSel) { 
         grid.jqGrid('restoreRow',lastSel); 
         lastSel = rowid; 
        } 
        return true; 
       }, 
       onSelectRow: function (rowid, status, e) { 


        var p = grid[0].p; 
        if ((p.multiselect && $.inArray(rowid, p.selarrrow) < 0) || rowid !== p.selrow) { 
         // if the row are still non-selected 
         grid.jqGrid("setSelection",rowid,true); 
        } 
        /*grid.jqGrid('editRow',rowid,true,function(){ 
         // $("input, select",e.target).focus(); 
        });*/ 
        grid.jqGrid('editRow',rowid,true); 
        $("input, select",e.target).focus(); 
        return; 
       } 
      }); 
      grid.jqGrid('gridResize', { minWidth: 450, minHeight: 150 }); 
     }); 
    //]]> 
    </script> 
</head> 
<body> 
    <table id="list"><tr><td/></tr></table> 
    <div id="pager"></div> 
</body> 
</html>

來源

2015-02-10 Amete Blessed

的問題是，所述<input>元件可以線$("input, select",e.target).focus();將被執行之後被放置。下一個原因：可以將焦點設置爲之後的第一個可編輯元素所在行您設置的焦點將被執行。

我認爲，你可以有足夠大的超時配售.focus()通話setTimeout內解決問題：

var $clickedCell = $(e.target).closest("td"); setTimeout( $clickedCell.find("input, select").focus(); , 100);

來源

2015-02-11 10:00:59 Oleg

這工作！感謝Oleg !!!! – 2015-02-12 15:53:10

@Amete：不客氣！ – Oleg 2015-02-12 16:34:51

JqGrid設置專注於SelectRow無法正常工作

回答

相關問題