jqGrid에서 이벤트 처리기를 호출하는 방법 사용자 정의 포메터를 선택하십시오.

Question

드롭 다운이있는 jqGrid가 있습니다. 나는 "custom formatter"(dropDownFormatter1) 값으로 드롭 다운을 채우고있다. 나는 그것을 얻고있다. 그러나 onchange에 따라 나는 어떤 기능을 할 필요가있다. 내 주요 질문은 아래 코드에 onchange 이벤트를 추가하는 방법입니다.

다음

$("#grid").jqGrid({ 
    url: bookingStatusurl, 
    datatype: "json", 
    shrinkToFit: true, 
    colModel: [ 
     { name: 'BookingStatusID', index: ''BookingStatusID'', hidden: true, 
      key: true }, 
     { name: 'BookingStatus', index: 'BookingStatus', width: 260, 
      sortable: false }, 
     { name: 'NumberOfBooking ', index: 'NumberOfBooking', width: 300, 
      sortable: false, align: 'right', formatter: 'currency', 
      formatoptions: { prefix: "Number Of Booking: "} }, 
     { name: 'SortOrderType', index: 'SortOrderType', align: 'right', 
      edittype: 'select', formatter: **dropDownFormatter1** } 
     //As per the on change of my dropDownFormatter1 by subgrid need to change. 
    ], 
    rowNum: 40, 
    rowList: [40, 80, 120] 
    //sortname: 'id', 
    viewrecords: true, 
    //sortorder: "desc", 
    autowidth: true, 
    multiselect: false, 
    shrinkToFit: true, 
    height: 'auto', 
    altRows: true, 
    subGrid: true, 
    //loadonce: false, 
    //caption: "Pipeline By Booking Status", 
    subGridRowExpanded: function (subgrid_id, row_id) {} 
}); 

가 cutom 포매터 코드입니다 :

function dropDownFormatter1(cellvalue, options, rowObject, action) { 
    // var statusTypeId = rowObject[0]; 
    return '<label>Sort Order:</label>' + 
     '<select>' + 
      '<option value="asc">asc</option>' + 
      '<option value="desc">desc</option>' + 
     '</select>'; 
} 

저를 도와주세요

여기 내 코드입니다.

감사합니다.

Answer 1

onchange 콜백을 구현하는 가장 쉬운 방법은 dropDownFormatter1 포맷터를 생성하는 HTML 코드에 onchange 속성을 추가하는 것입니다. 당신은 예를 들어에 dropDownFormatter1을 수정할 수 onchange 하나에서 myOnChangeFormatter1Callback를 호출하려면 글로벌 수준의 사용자 정의 JavaScript 함수

var myOnChangeFormatter1Callback = function (event) { 
     var $select = $(this), $tr = $select.closest('tr.jqgrow'); 

     alert ("the select in the row with id=" + $tr.id + 
       " are changed to the option" + $select.val()); 
    }; 

에 정의 할 수 있습니다 다음

function dropDownFormatter1(cellvalue, options, rowObject, action) { 
    // var statusTypeId = rowObject[0]; 
    return '<label>Sort Order:</label>' + 
     '<select onchange="myOnChangeFormatter1Callback.call(this, arguments[0]);">' + 
      '<option value="asc">asc</option>' + 
      '<option value="desc">desc</option>' + 
     '</select>'; 
} 

는 일반적으로 이벤트로 event로 호출됩니다 첫 번째 매개 변수 (광고 전용) 매개 변수의 이름이지만 일부 브라우저에서는 windows.event을 대신 사용해야합니다. 그래서 좀 더 호환되는 사람은 event || windows.event을 사용하거나 그냥 arguments[0]을 사용해야합니다.

당신이 var myOnChangeFormatter1Callback = function (...와 함수를 정의하고 싶지 않아요 당신이 자바 스크립트 실행 엄격 모드에서 목록에서 함수의 내부 this를 전달 할 수없는 될 것 function myOnChangeFormatter1Callback (... 사용됩니다. 이 경우 추가 매개 변수로 this을 전달하고 "myOnChangeFormatter1Callback.call(this, arguments[0]);" 대신 "myOnChangeFormatter1Callback(this, arguments[0]);"을 사용해야합니다. myOnChangeFormatter1Callback의 프로토 타입은 var myOnChangeFormatter1Callback = function (event) {...}에서 function myOnChangeFormatter1Callback (myObj, event) {...}으로 변경해야합니다.