Невозможно обработать событие click checkbox в jqGrid

Question

Я использую jqGrid для какой-либо цели. В этой сетке есть 6 столбцов, в которых последние столбцы представляют собой только целочисленное значение (количество лицензий, доступных для лицензии NoLicense), и последний второй флажок.

Я хочу использовать следующие функции, используя эту сетку.

1. Если флажок установлен, то значение NoLicense должно быть noLicense ++;

   2 Если тот же флажок отключен, тогда значение NoLicense должно быть noLicense--;

2. Если NoLicense = 0, то предупреждение ('Лицензия исчерпана');

Ниже мой код:

$.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. Посмотрите на the demo, который я создал для the answer. Демонстрационные тесты для щелчка внутри столбца closed (вам нужно изменить closed на Used причины). Для выполнения некоторых действий при нажатии на флажках необходимо только изменить линию if (cm[iCol].name === "closed") { на if (cm[iCol].name === "Used" && e.target.tagName.toUpperCase() === "INPUT") {