2014-10-31 86 views
0

我正在使用jqGrid出於某種目的。在此網格中有6列,其中最後一列僅爲整數值(NoLicense-可用許可證計數),最後2列爲複選框。無法處理jqGrid中的複選框單擊事件

我想使用此網格進行以下功能。

  1. 如果複選框被打勾,那麼NoLicense的值必須是NoLicense ++;

    2如果相同的複選框不勾選,那麼NoLicense的值必須是NoLicense--;

  2. 如果NoLicense = 0,則alert('License exhausted');

下面是我的代碼:

$.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.選擇行後如果我更改複選框的值,它不會觸發事件。

可能是我不正確理解。

enter image description here

回答

1

這在我看來,你可以通過使用formatoptions: { disabled: false }具有formatter: 'checkbox''Used'簡化代碼。在這種情況下,您根本不需要使用任何編輯模式。要對列'Used'中的複選框進行檢查/取消打包,可以使用beforeSelectRow回調。看看我爲the answer創建的the demo。點擊closed列中的點擊進行演示測試(您需要更改closedUsed的原因)。爲了在點擊複選框時進行一些操作,只需要將行if (cm[iCol].name === "closed") {更改爲if (cm[iCol].name === "Used" && e.target.tagName.toUpperCase() === "INPUT") {