Jak przenieść kursor z drugiej kolumny do pierwszej kolumny w nowym wierszu w jqgrid

Question

Jestem nowy w jqgrid. Mam następujący kod, aby wstawić nowy wiersz po naciśnięciu klawisza tabulatora. Działa w większej części. Ale po wstawieniu nowego wiersza fokus zostaje podany drugiej kolumnie w tym wierszu zamiast pierwszej kolumnie.

Jak rozwiązać ten problem?

HTML:

<table id="list11"></table> 
<!--<div id="paddtree"></div>--> 
<label>press tab to add new row</label> 
<script> 
    var selIRow = 1; 
     var lastsel2 
     jQuery("#list11").jqGrid({ 
    // url:'d/${jobId}.htm', 
      datatype: "json", 
      colNames: ['First Name', 'Email ID', 'Phone Number'], 
      colModel: [ 
       // {name:'id',index:'id', width:75, search:true, stype:'text' , search:true, sortable:true}, 
       {name: 'firstName', width: 180, search: true, stype: 'text', sortable: true, editable: true, }, 
       {name: 'email', index: 'email', width: 250, editable: true}, 
       {name: 'phoneNumber', index: 'phoneNumber', width: 100, align: "right", editable: true, 
        editoptions: { 
         dataInit: function(elem) { 
          $(elem).focus(function() { 
           this.select(); 
          }) 
         }, 
         dataEvents: [ 
          { 
           type: 'keydown', 
           fn: function(e) { 
            var key = e.charCode || e.keyCode; 
            if (key == 9 || key == 15)//tab 
            { 
             var grid = $('#list11'); 
             //Save editing for current row 
             grid.jqGrid('saveRow', selIRow, false, 'clientArray'); 
             //If at bottom of grid, create new row 
             // alert(grid.getDataIDs().length); 
             if (selIRow++ == grid.getDataIDs().length) { 

              grid.addRowData(selIRow, {}); 
             } 
             //Enter edit row for next row in grid 
             grid.jqGrid('editRow', selIRow, true, 'clientArray'); 

            } 
           } 
          } 
         ] 
        }, }, 
      ], 
      beforeRequest: function(data) { 
       var grid = $('#list11'); 

       grid.addRowData(grid.jqGrid('getGridParam', 'records') + 1, {}); 
       grid.jqGrid('editRow', selIRow, false, 'clientArray'); 


      }, 
      onSelectRow: function(id) { 
       if (id && id !== lastsel2) { 

        jQuery('#list11').jqGrid('restoreRow', lastsel2); 
        jQuery('#list11').jqGrid('editRow', id, true); 
        lastsel2 = id; 
       } 
      }, 
      // editurl: "data/add.htm", 
      sortname: 'id', 
      viewrecords: true, 
      sortorder: "desc", 
    caption: "Candidates applied for <bold> ${job.getTitle()}</bold>", 
      // pager : "#paddtree", 
      emptyrecords: "new", 
     }); 
</script> 

Dzięki.

Answer 1

Twój przykład działa, jeśli używasz e.preventDefault():

if (key == 9 || key == 15) //tab 
{ 
    e.preventDefault(); 
    //do your other stuff... 

Answer 2

Korzystając e.preventDefult();. Zapobiega to predefiniowane czynności, takich jak otwartej nowej karcie na kliknięcia ....

Alternatywnie

Osobiście nie był używany jgrid ale składnia jest taka sama z DataTables jQuery. Jest bardzo elastyczny i ma niesamowitą dokumentację.

Answer 3

Wszystko co musisz zrobić, aby kodzie jest dodać linię e.preventDefault(); tutaj:

if (key == 9 || key == 15)//tab 
{ 
    e.preventDefault(); 
    ...