[JqGrid] afterEditCell(cell에 input 들어가는 것 방지)

afterEditCell

afterEditCell은 jqGrid에서 편집하는 각 셀의 편집 후에 호출되며, 사용자가 편집을 완료하고 포커스를 다른 셀로 이동할 때 호출됩니다.

afterEditCell 함수는 다음과 같은 인자를 받습니다:

• rowid: 편집된 셀의 행 ID
• cellname: 편집된 셀의 열 이름
• value: 편집된 값
• iRow: 편집된 행의 인덱스
• iCol: 편집된 열의 인덱스

예를 들어, 편집된 값을 서버로 저장하거나 특정 유효성 검사를 수행할 수 있습니다.

그리고 grid편집 후 저장할 때 input의 html이 데이터로 저장되는 경우가 있는데 이를 방지하기 위해서도 쓸 수 있습니다. 아래 코드가 이에대한 코드입니다.

jQuery("#grid").jqGrid({
   datatype: "local", 
   colNames: ['Col1', 'Col2', 'Col3'],
   colModel: [
         {name: 'Col1', index: 'Col1', width: 70, editable: true, edittype: 'text' },
         {name: 'Col2', index: 'Col2', width: 70, editable: true, edittype: 'text' },
         {name: 'Col3', index: 'Col3', width: 70, editable: true, edittype: 'text' }
    ],
    cellEdit: true,
    onCellSelect: function (rowid, iCol, cellcontent, e) {
      $("#grid").jqGrid('editCell', rowid, iCol, true);
   },
    afterEditCell: function (rowId, cellName, value, indexRow, indexCol) {
            //setTimeout(function () {
            //  $("#" + rowId + "_" + cellName).focus();
            //}, 0);
            $("#" + rowId + "_" + cellName).blur(function (e) {
              $("#grid").jqGrid("saveCell", indexRow, indexCol);
            });
          },
// ...
});

afterEditCell 함수에 input에 blur이벤트에서 saveCell메서드 호출하는게 핵심입니다.

 

onCellSelect함수는 cell을 선택했을 때 호출되는 함수로

cell 클릭 후 input에 바로 focus를 주기위해 onCellSelect함수에서 editCell메서드를 사용합니다.

주석처리된 focus()부분은 이와 같은 내용으로 둘 중 하나로 사용하면 됩니다.

setTimeout은 jqgrid와는 관계없이 focus함수가 작동하지 않을 때 쓰는 방법 중 하나입니다.