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

Question

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

我想使用此网格实现以下功能。

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

   2 如果同一复选框未选中，则 NoLicense 的值必须为 NoLicense--;

2. 如果NoLicense=0，则alert('许可证已用完');

下面是我的代码:

    $.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

在我看来，您可以通过在 'Used' 列中使用 formatoptions: {disabled: false } 来简化代码，其中 formatter: 'checkbox '。在这种情况下，您根本不需要使用任何编辑模式。要对 'Used' 列中的复选框进行选中/取消选中操作，可以使用 beforeSelectRow 回调。看the demo我为 the answer 创建的。该演示测试了关闭列内部的点击(您需要将关闭更改为已使用)。要在单击复选框时执行某些操作，只需将行 if (cm[iCol].name === "close") { 更改为 if (cm[iCol] ].name === "已使用"&& e.target.tagName.toUpperCase() === "输入") {