2013-05-03 131 views
9

我是jqgrid的新手。 我有下面的代碼來插入一個新行時,按Tab鍵。它大部分適用於它。但是當插入一個新行時,焦點將被賦予該行中的第二列而不是第一列。如何將光標從第二列移動到第一列jqgrid的新行中

我該如何解決這個問題?

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> 

感謝。

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

你有沒有tryed e.stopPropagation()當您設置一個新行進行編輯?即時通訊不知道,但也許發生的事情是,你開始編輯一行,焦點給予第一個輸入,但然後事件傳播並通過焦點到下一個輸入 – cernunnos 2013-05-03 11:10:53

+2

我有許多問題,你發佈的代碼。第一個:你如何填充網格(你使用'datatype:「json」'所以它應該是'url'選項)?你沒有定義'editurl'。你可以在一些地方指定''clientArray''作爲'url'。你想只在本地修改數據嗎?此外,您設置了第三列('phoneNumber')的焦點,而且以錯誤的方式設置焦點,但是您寫了「焦點賦予該行中的第二列而不是第一列」。你想要實現什麼行爲? – Oleg 2013-05-03 11:10:56

+0

@Oleg我已經指定了'URL'和'EDITURL',但只有在這裏我已經註釋掉了。 – 2013-05-03 11:16:05

回答

0

你的榜樣工程。這樣可以防止預定義的動作,例如在點擊打開新的標籤頁....

或者

個人沒有使用jgrid但語法是用jQuery數據表一樣。它非常靈活,它有一個令人敬畏的文檔看看它。

0

使用e.preventDefult();:如果您使用e.preventDefault()

1

所有你必須做你的代碼中添加一行e.preventDefault();這裏:

if (key == 9 || key == 15)//tab 
{ 
    e.preventDefault(); 
    ... 
相關問題