如何从jqGrid的选择自定义格式

Question

调用事件处理程序我有一个jqGrid的一个下拉。我正在用“自定义格式化程序”（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) {} 
}); 

下面是对自定义格式的代码：

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属性。例如，您可以定义在全球一级您的自定义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()); 
    }; 

拨叫onchange一个myOnChangeFormatter1Callback可以修改dropDownFormatter1以下

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 (...定义功能，将使用function myOnChangeFormatter1Callback (...你将无法转发this在列表中的函数内的JavaScript执行的严格模式。在这种情况下，您应该将this作为附加参数，并使用"myOnChangeFormatter1Callback(this, arguments[0]);"而不是"myOnChangeFormatter1Callback.call(this, arguments[0]);"。的myOnChangeFormatter1Callback原型应该var myOnChangeFormatter1Callback = function (event) {...}改为function myOnChangeFormatter1Callback (myObj, event) {...}。