无法处理jqGrid中的复选框单击事件

Question

我出于某种目的使用jqGrid。在此网格中有6列，其中最后一列只是整数值（NoLicense-可用许可证计数），最后一列是复选框。

我想使用此网格制作以下功能。

1. 如果勾选复选框，则NoLicense的值必须为NoLicense ++;

   2如果相同的复选框未取消，则NoLicense的值必须为NoLicense - ;

2. 如果NoLicense = 0，则提醒（＆＃39;许可证用尽＆＃39;）;

以下是我的代码：

    $.ajax({
    type: "POST",
    url: url,
    data: param,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (xhr, status, error) {
        try {
            var msg = JSON.parse(xhr.responseText);
            $(this).MessageBox('error', msg.Message);
        }
        catch (e) {
            $(this).MessageBox('error', xhr.responseText);
        }
        return false;
        $(this).HideBusy();
    },
    success: function (data) {
        var xmlString = data.d;
        if (xmlString != '') {
            $("#AvailableLicense").jqGrid({
                ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
                datatype: 'xmlstring',
                datastr: xmlString,
                xmlReader: { root: "AvailableLicenses", row: "row", repeatitems: false, id: "ItemCode" },
                colNames: ['Code', 'Name', 'Profile Name', 'Expires On', 'Used', 'Available'],
                colModel: [

                            { name: 'ItemCode', index: 'TenantConfID', align: "left", width: 40 },
                            { name: 'Itemname', index: 'ObjectTypeID', align: "left", width: 40 },
                            { name: 'ProfileName', index: 'CRMObjectTypeID', align: "left", width: 20 },
                            { name: 'EndDate', index: 'SAPObjectTypeID', align: "left", width: 40, formatter: 'date', formatoptions: { srcformat: 'Y/m/d', newformat: 'd-m-Y'} },
                            { name: 'Used', index: 'Used', align: "center", width: 20, editable: true, edittype: 'checkbox', formatter: 'checkbox',
                                editoptions: { value: "1:0", readonly: false }
                            },
                            { name: 'U_NoUsers', index: 'SAPObjectText', align: "center", width: 40 }
                         ],
                onSelectRow: function (rowid, status, e) {
                    UserRowID = $("#ClientUsers").jqGrid('getGridParam', 'selrow');
                    debugger;
                    if (UserRowID != null) {
                        selectedRowId = $("#AvailableLicense").jqGrid('getGridParam', 'selrow');
                        $('#AvailableLicense').jqGrid('editRow', selectedRowId, true);
                        var $target = $(e.target), $td = $target.closest("td"),
                        iCol = $.jgrid.getCellIndex($td[0]),
                        colModel = $(this).jqGrid("getGridParam", "colModel");
                        if (iCol >= 0 && $target.is(":checkbox")) {
                            var Count = $("#AvailableLicense").jqGrid('getCell', selectedRowId, 'U_NoUsers');
                            var Used = $("#AvailableLicense").jqGrid('getCell', selectedRowId, 'Used');
                            if (Used == '1') {
                                if (Count > 0) {
                                    Count = Count - 1;
                                    var rowData = $('#AvailableLicense').jqGrid('getRowData', selectedRowId);
                                    rowData.U_NoUsers = Count;
                                    $('#AvailableLicense').jqGrid('setRowData', selectedRowId, rowData);
                                }
                                else
                                    $(this).MessageBox('error', 'License Exhausted');
                            }
                            else {
                                Count = Count + 1;
                                var rowData = $('#AvailableLicense').jqGrid('getRowData', selectedRowId);
                                rowData.U_NoUsers = Count;
                                $('#AvailableLicense').jqGrid('setRowData', selectedRowId, rowData);

                            }


                        }
                        return true;
                    }
                    else
                        $(this).MessageBox('error', 'Please select user first');
                },
                rowNum: 10,
                mtype: 'POST',
                pager: "#AvailableLicenseMap",
                gridview: true,
                rownumbers: true,
                loadonce: true, forceFit: true,
                width: 600,
                height: 250,
                caption: 'Available License'
            }).jqGrid('navGrid', '#AvailableLicenseMap', { edit: false, add: false, del: false, search: false }); //.trigger('reloadGrid') ;

        }
    }
});

但是当我勾选复选框时，我发现rowselectevent不能正常工作。 1.当我选择第一行事件触发时。 2.当我重新选择同一行时，它不会发射。 3.选择行后如果我更改复选框的值，则不会触发事件。

可能我不能理解它。

Answer 1

在我看来，您可以使用formatoptions: { disabled: false } 'Used'列formatter: 'checkbox'中的'Used'来简化代码。如果您根本不需要使用任何编辑模式。要对beforeSelectRow列中的复选框进行检查/取消确认操作，可以使用closed回调。查看我为the demo创建的the answer。该示例测试了列closed内部的点击（您需要将Used更改为原因的if (cm[iCol].name === "closed") {。要在点击复选框时执行某些操作，只需要将行if (cm[iCol].name === "Used" && e.target.tagName.toUpperCase() === "INPUT") {更改为{{1}}