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) {}
});

以下是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回调的最简单方法是在生成onchange格式化程序的HTML代码中添加dropDownFormatter1属性。例如，您可以在全局级别定义自定义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());
    };

要从myOnChangeFormatter1Callback致电onchange，可以将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) {...}。

如何从jqGrid中调用事件处理程序选择自定义格式化程序

1 个答案: