새 행을 추가 한 후 jqGrid 인라인 편집이 작동하지 않습니다.

Question

현재 free-jqGrid 버전 4.14.1 (cdn 하이퍼 링크 사용)을 사용하고 있습니다. 사용자가 입력 값을 사용하여 새 행을 추가하도록하고 행을 클릭하여 변경하려는 경우 행을 편집하고 싶습니다. 새 행을 추가하기 위해 jqGrid 호출기를 사용하지 않고 추가 버튼을 만들었습니다.

지금은 두 가지 문제에 직면하고 있습니다 :

1) 나는 인라인 editting에 대한 this demo을 대해 참조. 이 데모 코드에 따르면, 나는이 라인,

grid.jqGrid('restoreRow', lastSelection); 

그러나 선을 사용할 필요가, 내가 새 행을 추가하고 매번, 이전 행이 삭제됩니다 만 새로 추가 된 행이 표시됩니다. this fiddle을 확인하십시오.

2) 1) 때문에, 나는 그 라인을 주석 처리했다. (필자는 적절한 기능을하기 위해서 그렇게 생각하지 않는다.) 실행을 시도했다. 이전에 추가 된 행은 새 행을 추가 한 후 남아 있지만 표시된 모든 행이 같은 텍스트 상자에 표시되고이 (fiddle) : 내가하고 싶은 무엇

가 아니라 사용자가 수정할 수있는 행을 클릭 한 후,이 같은 텍스트 상자로 변경 구릿도 데모.

이 문제와 관련된 게시물을 찾지 못했습니다. 아무도 나를 도와주세요?

=============================================

추가 :

확인을 위해 기본 테이블 값으로 시작했습니다. 기본 데이터 행은 원했던대로 작동했지만 (수정 행을 클릭) 새 행은 그렇지 않았습니다. 입력 새로운 행을 선택하지하지 않는처럼 클릭하면 집중 타격 후 편집 모드를 종료하지 보인다 키 ..

============== ================

================

$(document).ready(function() { 

     Load_Bin(); 

     $('#Bin-QtyBin').focus(); 
     $('#btnEnter-Bin').click(function() { 

       var valNumBin = $('#Bin-numBin').val(); 
       //if bins are dropbox: select enabled one 

       var valQtyBin = $('#Bin-QtyBin').val(); 


       var paramRow = { 
        rowId: "new_row", 
        initdata: { 
         numBin: valNumBin, 
         QtyPutAway: valQtyBin 
        }, 
        position: "first" //"last" 
       } 

       $("#tbBin").jqGrid('addRow', paramRow); 
       $('#Bin-numBin').val(''); 
       $('#Bin-QtyBin').val(''); 

     }); 
}); 
    var lastSelection; 

    function Load_Bin() { 
     var tbBinArea = $('#tbBin'); 
     tbBinArea.jqGrid({ 
      datatype: "local", 
      colModel: [ 
       { label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true }, 
       { label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }], 
      rowNum: 10, 
      rowList: [10, 15, 30, "10000:All"], 
      prmNames: { 
       page: 'defaultPageNumber', 
       rows: 'rowsPerPage' 
      }, 
      //forceClientSorting: true, 
      rownumbers: true, 
      //autowidth: true, 
      viewrecords: true, 
      loadonce: true, 
      multiselect: false, 
      multiPageSelection: false, 
      iconSet: "fontAwesome", 
      pager: true, 
      height: 250, 
      onSelectRow: editRow, 
      searching: { 
       searchOperators: true, 
       defaultSearch: 'cn', 
       closeOnEscape: true, 
       searchOnEnter: false, 
       multipleSearch: true 
      } 
     }); 

    } 


    function editRow(id) { 

     if (id && id !== lastSelection) { 
      var grid = $("#tbBin"); 
      grid.jqGrid('restoreRow', lastSelection); 
      grid.jqGrid('editRow', id, { keys: true }); 
      lastSelection = id; 
     } 
    }; 

: ============================

아래 단지 참고 용 그리드의 코드 (피. 에스. this fiddle의 소유자 덕분에 코드를 피들로 옮기기가 힘들고 피델을위한 원래 대답 링크를 잃어 버려서 미안하지만 ...)

Answer 1

나는 전체를 다시로드하기 만했습니다. 새 행을 추가 한 후 새로 추가 된 행이 편집 모드로 바뀌는 것을 제외하면 잘 작동합니다. 사용자가 클릭 할 때 이미 강조 표시 되었기 때문에 클릭하지 않았 음을 감지하지 못합니다.

새 행을 작성한 후 방금 추가했습니다 코드 :

  var reloaddata = $('#tbBin').jqGrid("getGridParam", "data"); 

      $('#tbBin') 
       .jqGrid('setGridParam', 
       { 
        datatype: 'local', 
        data: reloaddata 
       }) 
       .trigger("reloadGrid");