datepicker를 클릭하지 않는 한 테이블 외부를 클릭하면 jqgrid 테이블 행이 저장됩니다.

Question

jqgrid 테이블이 있습니다. 한 열은 datepicker 열입니다.

이 코드는 셀을 클릭 할 때 테이블 셀을 절약합니다.

jQuery(document).on('focusout','[role="gridcell"] *', function(){ jqGridTegevused.jqGrid('saveCell', row, col); })

이 모두 좋다. 그러나이 코드는 datepicker의 작업을 방해합니다. datepicker에서 date를 선택하면 테이블 셀로 설정되지 않습니다.

내가 셀을 저장하기 전에 먼저 작업을 끝내기 위해 datepiceker를 필요로하기 때문에 어떻게하면 테이블 셀 외부에서 clik이 셀이 저장되는지를 확인할 수 있습니다. 그리고 현재 포커스는 datepickers onSelect 전에 발생합니다. DatePicker onSelect가 아닌 날짜를 수동으로 추가하면 셀을 포커스 아웃에 저장해야합니다.

Answer 1

이벤트의 relatedTarget 속성을 사용하여 사용자가 datepicker 컨트롤을 클릭했는지 여부를 확인할 수 있습니다. datepicker의 바깥 쪽 div는 클래스 ui-datepicker입니다. 따라서 코드가

$(document).on('focusout','[role="gridcell"] *', function (e) { 
    var p = jqGridTegevused.jqGrid("getGridParam"); 

    if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) { 
     // save editing cell only if the current click is not inside of Datepicker 
     jqGridTegevused.jqGrid('saveCell', p.iRow, p.iCol); 
    } 
}); 

다음 문제로 해결 될 수있는 다음 focusout은 번에 대한 focusOut에 을 트리거됩니다. 숫자 피벗의 날짜를 선택한 후 사용자가 그리드 외부를 클릭 한 후에 나중에 셀을 저장할 수 있도록 포커스를 입력 필드로 강제 설정하려면 datepicker의 onSelect 콜백 내에 추가 코드를 작성해야합니다.

$(document).on('focusout','[role="gridcell"] *', ...);의 사용법이 완벽하지 않을 수 있음에 감사드립니다. 신중하게 테스트해야합니다. afterEditCell의 입력/선택 ... 내부에 focusout을 바인딩하는 것이 $(document).on('focusout','[role="gridcell"] *'과 같이 더 좋을 것 같습니다. 내가

afterEditCell: function (rowid, nm, tmp, iRow, iCol) { 
    var $grid = $(this); 

    $(this.rows[iRow].cells[iCol]) 
     .find("input,textarea,select,button,object,*[tabindex]") 
     .filter(":input:visible:not(:disabled)") 
     .first() 
     .on("focusout", function (e) { 
      var p = $grid.jqGrid('getGridParam'); 

      if ($(e.relatedTarget).closest('.ui-datepicker').length === 0) { 
       $grid.jqGrid('saveCell', p.iRow, p.iCol); 
      } 
     }); 
} 

을 사용하고 난 날짜 선택기의 onSelect의 내부 입력 요소에 포커스를 설정 추가 곳 https://jsfiddle.net/7oLga5ze/를 참조하십시오.