jqGrid：內聯編輯整行，但關注單元格單擊以進入編輯模式

Question

我們的Web應用程序使用jqGrid進行數據輸入，並且數據以內聯和行的形式編輯。

客戶希望獲得更「類似Excel」的體驗，以便通過單擊單元格將行切換爲內聯編輯時，該單元將接收焦點（當前，該行中的第一個單元格獲得焦點）。

Answer 1

不幸的是，網格只能將焦點設置爲行中的第一個可編輯字段。你可以在源代碼grid.inlinedit.js中看到它。這計算出的行的索引來設置焦點，通過遍歷它們，找到第一個：

if(cm[i].editable===true) { 
    if(focus===null) { focus = i; } 

，後來其設置聚焦：

$("td:eq("+focus+") input",ind).focus(); 

其中在選擇所述元素存儲在focus變量中的索引 - 僅供參考，請參閱:eq selector文檔。

這就是說，如果你願意的話，你可以編輯代碼，此部分可以添加自己的自定義邏輯來控制哪些元素接收焦點...

Answer 2

我與賈斯汀同意的jqGrid沒有直接支持的你需要的行爲。您可以接收的需要的方式可能會更復雜，只是jqGrid的一個選項。請從the answer查看the code。我希望它能幫助你。

Answer 3

這是jqGrid的嚴重缺陷。 如果網格比窗口寬，您還需要向右滾動以使點擊的單元格可見。爲此，您可以從 http://www.trirand.com/blog/?page_id=393/help/inline-edit-problem-with-scrolling/

 if (rowID && rowID !== lastSelectedRow) { 
      var scrollPosition = 0; 
      scrollPosition = grid2.closest(".ui-jqgrid-bdiv").scrollLeft(); 
      grid2.jqGrid('restoreRow', lastSelectedRow); 
      grid.jqGrid('editRow', rowID, true); 
      lastSelectedRow = rowID; 
      setTimeout(function(){ 
       grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition); 
       },100); 

Answer 4

我遇到了同樣的問題，使用的代碼。非常令人沮喪。我修改了jquery.jqGrid.js文件以適應單擊單元格的設置焦點。

在我editRow函數添加以下代碼：

function editRow(id, row, col, z) 
{ 
    grid.jqGrid("editRow", id, true, function() 
    { 
     var f = $("input, select", z.target).focus(); 

     return f; 
    }); 
} 

這將創建一個變量f最終將在$ .jgrid.extend

的問題是要傳遞給「oneditfunc」在setTimeout函數中。

$("td:eq("+focus+") input",ind).focus(); 

因爲此操作將焦點設置爲上述.each功能的第一個可編輯字段。這將是通過焦點索引的好地方，但不可能。

// End compatible 
return this.each(function() 
{ 
    var $t = this, nm, tmp, editable, cnt = 0, focus = null, svr = {}, ind, cm, bfer; 
... 

然後我添加了下面的代碼。 （帶>>>的行不變，只是幫助您在代碼中找到插入點。）

>>>  $($t).triggerHandler("jqGridInlineEditRow", [rowid, o]); 


    if ($.isFunction(o.oneditfunc)) 
    { 
     // modified to allow for setting focus on the 
     // field clicked on 

     // sets a return value. this was added to the original code. if using 
     // legacy code, should see no change as r will be undefined 
     var r = o.oneditfunc.call($t, rowid); 

     // if get a return value, this indicates you want to set focus 
     if (r && r[0]) 
     { 
      var focusIndex = focus; 
      var i = 0; 

      // look for the field name that was clicked on 
      // cm, which is built above, has no index value associated 
      // with it, so we must keep track of 
      var focusField = $.grep(cm, function(c) 
      { 
       // find the field name which was clicked on 
       if (c.name == r[0].name) 
        focusIndex = i; 

       i++; 

       return c.name == r[0].name; 
      }); 

      // if the field is editable, then update focus index 
      // which is defined above 
      if (focusField[0].editable) 
      { 
       focus = focusIndex; 
      } 
     } 
    } 

最優雅的解決方案？可能不會，但它確實允許所有遺留代碼工作，並找出哪個字段被點擊，所以可以設置焦點

Answer 5

就我而言，我用Justin Ethier和Steve的答案來提出我自己的解決方案（對於jqGrid 4.4。3）：

在的jqGrid的源極，我只是註釋掉以下行（這是爲了防止已編輯的行的第一輸入端以接收聚焦）：

// commented out 
// $("td:eq("+focus+") input",ind).focus(); 

然後，創建一個全球JS變量，將持有的點擊來源的網格：對細胞，當點擊

var clickedCell; 

最後，設置變量。

$('#myJqGrid td').on('click', function(e){ clickedCell = this; }); 

爲了能夠雖然附加事件表格單元格，我們需要確保電網已經建立，所以它在jqGrid的，例如在「gridComplete」功能來完成：

$('#myJqGrid').jqGrid('setGridParam', { 
    gridComplete: function(id){ 
         $('#myJqGrid td').on('click', function(e){ clickedCell = this; }); 
        } 
}); 

最後，編輯一行時，檢索到單擊的單元格（保存在變量「clickedCell」），並且將焦點放到裏面輸入或文本域。這已在jqGrid的的「onSelectRow」功能來完成：

$('#myJqGrid').jqGrid('setGridParam', 
          { 
          onSelectRow : function(id) { 
           ... 
           //switching the selected row to editmode 
           $('#myJqGrid').jqGrid(
            'editRow', 
            id, 
            { 
             keys: true, 
             // when editing the row, give the focus to the input 
             //or textarea within the last clicked cell 
             oneditfunc: function() { 
              $('input, textarea', clickedCell).focus(); 
            } 
           ); 
           ... 
          } 
          } 
         }); 

唯一的問題是，真的沒有不碰甚至略有jqGrid的源代碼的解決方案。如果你不這樣做，它仍然可以工作，但是第一個輸入仍然會首先獲得焦點，即使在分配了正確的焦點後，也會移動頁面的水平滾動。

Answer 6

我發佈了這個答案在另一個stackoverflow相關的問題。希望這會適用於你。

我以某種方式成功地通過將dblclick事件附加到表的每個td來實現此目的，我知道這不是最好的方法，但您可以自由優化它的方式，您也可以忽略setTimeout僅用於測試。

$("#jqGrid").on("dblclick", "td", function (event) { 
       // setTimeout(function() { 
         console.log(this); 
         $(event.target).find("input,select").focus();      
        // }, 0); 
       }); 

希望這會幫助你。