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); 
       }); 

希望这会帮助你。