Jqgrid가 inlineNav 스타일로 새 행을 추가합니다.

Question

012qEditSave 및 Delete 버튼을 JqGrid 아래에 만들고 싶습니다.

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    var lastSel = 0; 
    jQuery("#list").jqGrid({ 
     url: '/SpeakerJqgrid/GridData/', 
     editurl: "/SpeakerJqgrid/MyEdit/", 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['SpeakerID', 'SpeakerName'], 
     colModel: [ 
         { name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }, 
         { name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} } 
       ], 
     onSelectRow: function (id) { 
      if (id && id !== lastSel) { 
       jQuery('#list').restoreRow(lastSel); 
       lastSel = id; 
      } 
      jQuery('#list').editRow(id, true); 
     }, 
     loadComplete: function() { 
      //alert("Load Complete"); 
     }, 
     addRowData: function (rowid, rdata, pos, src) { 
      alert("addRowData"); 
      if (pos === 'afterSelected' || pos === 'beforeSelected') { 
       if (typeof src === 'undefined' && this[0].p.selrow !== null) { 
        src = this[0].p.selrow; 
        pos = (pos === "afterSelected") ? 'after' : 'before'; 
       } else { 
        pos = (pos === "afterSelected") ? 'last' : 'first'; 
       } 
      } 
      return oldAddRowData.call(this, rowid, rdata, pos, src); 
     }, 

     pager: jQuery('#pager'), 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'SpeakerName', 
     sortorder: "desc", 
     viewrecords: true,    
     autowidth: true, 
     autoheight: true, 
     imgpath: '/scripts/themes/black-tie/images', 
     caption: 'My first grid' 
    }) 
    $("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false}); 
    $("#list").jqGrid('inlineNav', '#pager', { 
     edittext: "Edit", 
     addtext: "Add", 
     savetext: "Save", 
     canceltext: "Cancel", 
     addParams: { position: "afterSelected" } 
    }); 
    }); 
</script> 

위 코드를 사용하여 내 그리드 나에게 AddEditSave 그리고 Delete라는 버튼을 보여줍니다.
하지만 그 버튼을 클릭하면 아무런 문제가 발생하지 않습니다.

추가 또는 수정 버튼을 클릭하면 실행되는 이벤트를 만들고 싶습니다.

대부분의 예제는 modal form을 사용하여 새 행을 추가하는 방법입니다. 하지만 필자가 사용해야하는 것은 스타일을 추가하는 인라인 그리드 행입니다.

귀하의 제안에 감사드립니다.

Answer 1

먼저 콜백 기능 addRowData이 없습니다. 을 수정하려면 'afterSelected'또는 'beforeSelected'를 지원하는addRowData 메서드를 수정하려면 the answer 또는 this one에서 the demo으로 제안을 따라야합니다.

이제 주요 질문입니다. inlineNav 메서드는 내부적으로 addRow 및 editRow 메서드를 사용합니다. 따라서 사용자가 inlineNav에 의해 추가 된 "추가"또는 "편집"버튼을 클릭하면 addRow 또는 editRow이 호출됩니다. addParams 및 editParams 옵션을 inlineNav으로 사용하여 addRow 또는 editRow의 기본 매개 변수를 변경할 수 있습니다. 당신은 방금 전화 될 자신의 콜백 함수를 지정해야하는 경우 경우에 사용자가 클릭 추가 또는 편집 버튼을 다음과 같은 코드를 사용할 수 있습니다 또한 당신은 아마 당신이 경우 onSelectRow 콜백의 코드를 제거해야합니다

$("#list").jqGrid('inlineNav', '#pager', { 
    edittext: "Edit", 
    addtext: "Add", 
    savetext: "Save", 
    canceltext: "Cancel", 
    addParams: { 
     position: "afterSelected", 
     addRowParams: { 
      // the parameters of editRow used to edit new row 
      keys: true, 
      oneditfunc: function (rowid) { 
       alert("new row with rowid=" + rowid + " are added."); 
      } 
     } 
    }, 
    editParams: { 
     // the parameters of editRow 
     key: true, 
     oneditfunc: function (rowid) { 
      alert("row with rowid=" + rowid + " is editing."); 
     } 
    } 
}); 

을 편집 버튼 inlineNav을 사용해야합니다.