jqGrid : 전체 행을 인라인 편집하지만 편집 모드로 들어가기 위해 클릭 한 셀에만 초점을 맞 춥니 다.

Question

웹 애플리케이션은 데이터 입력을 위해 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 문서를 참조하십시오.

은 당신이 그렇게 경사하는 경우가있는 jqGrid가의 직접적인 지원이 없다는 것을 ... 요소가 포커스를받는 제어하는 ​​사용자 정의 로직을 추가 저스틴 동의

Answer 2

를이 부분의 코드를 편집 할 수 말했다 당신이 필요로하는 행동. 당신이받을 수있는 방법은 jqGrid의 한 가지 옵션으로 더 복잡 할 수 있습니다. the code을 the answer에서 확인하십시오. 나는 그것이 당신을 도울 것이기를 바랍니다.

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 파일을 수정하여 클릭 한 셀에 포커스를 설정할 수있게했습니다.

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

     return f; 
    }); 
} 

이 궁극적으로 문제가 $ .jgrid.extend

에서 "oneditfunc"에 전달 될 변수 F를 만듭니다 : 내 editRow 기능에서

나는 다음과 같은 코드를 추가 setTimeout 함수에서.

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

위의 각 기능에서 첫 번째 편집 가능 필드로 포커스가 설정된 상태로 실행됩니다. 이것은 포커스 인덱스를 전달하기에 좋은 곳이지만 가능하지는 않습니다.

// 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

저의 경우 저스틴 이셔와 스티브의 답변을 모두 사용했습니다 (jqGrid 4.4.3) :있는 jqGrid의 소스의

, 난 그냥)가 포커스를 수용하도록 수정 된 행의 첫 번째 입력을 방지 할 수있다 (다음 행을 주석

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

을 그리고, I가 만든 그리드에서 클릭의 소스를 보유 할 글로벌 변수 :

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 관련 질문에 게시했습니다. 희망이 당신에게 적용됩니다.

어떻게 든 테이블의 모든 td에 dblclick 이벤트를 첨부하여이 작업을 수행하는 데 성공했지만, 이것이 최선의 방법은 아니라는 것을 알고 있습니다. 그러나 최적화 방법은 자유 롭습니다. 또한 setTimeout을 무시할 수 있습니다. 테스트 용으로 만 사용됩니다.

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

희망이 도움이 될 것입니다.