我正在使用jqGrid出於某種目的。在此網格中有6列,其中最後一列僅爲整數值(NoLicense-可用許可證計數),最後2列爲複選框。無法處理jqGrid中的複選框單擊事件
我想使用此網格進行以下功能。
如果複選框被打勾,那麼NoLicense的值必須是NoLicense ++;
2如果相同的複選框不勾選,那麼NoLicense的值必須是NoLicense--;
如果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.選擇行後如果我更改複選框的值,它不會觸發事件。
可能是我不正確理解。