我已经在项目上实现了jquery网格，在特定的行或复选框上实现了编辑功能，然后单击“编辑”按钮，它将打开一个模式，它可以按预期工作，但是当我单击“全选”复选框并单击编辑按钮将不会打开模式。
我在下面附上了一个代码片段，请看一下，并附上了屏幕截图
<table id="capacityTable" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#aaaaaaaaa"><script type="text/javascript">
'use strict';
var currentPageNumber;
var iDOfSelectedRows = [];
$(document).ready(function()
{
var capacityArray = [
<%
String startDateTimeOfRPNow = "";
String endDateTimeOfRPNow = "";
int totalCount = 0;
int remainingCount = 0;
int fUsed = 0;
int id = 0;
int rpTimeSlotId = 0;
if(capacities!=null)
{
for (CapacityDetails capacitydetails : capacities)
{
startDateTimeOfRPNow = capacitydetails.getStartTime();
endDateTimeOfRPNow = capacitydetails.getEndTime();
totalCount = Integer.parseInt(capacitydetails.getTotalCount());
remainingCount = Integer.parseInt(capacitydetails.getRemainingCount());
rpTimeSlotId = Integer.parseInt(capacitydetails.getRpTimeslotId());
if ((totalCount - remainingCount) > 0)
{
float fPercentage = ((float)totalCount - (float)remainingCount)/(float)totalCount;
fPercentage = (fPercentage)*100;
fUsed = (int)Math.round(fPercentage);
}
else
{
fUsed = 0;
}
%>
{
sDateTime : "<%=startDateTimeOfRPNow%>",
eDateTime : "<%=endDateTimeOfRPNow%>",
trpCount : "<%=totalCount%>",
rrpCount : "<%=remainingCount%>",
rpTimeSlotId : "<%=rpTimeSlotId%>",
<%
if(totalCount!=0)
{
%>
rrpPerc: 100;
<%
}
else
{
%>
rrpPerc: 0;
<%
}
%>
},
<%
id = id +1;
}
}
%>
],
idsOfSelectedRows = [];
function fnTimeSlot(id,rpTimeSlotId,startDateTimeSlot,endDateTimeSlot,totalCount,remainingCount)
{
this.id = id;
this.rpTimeSlotId = rpTimeSlotId;
this.sDateTime=startDateTimeSlot;
this.eDateTime=endDateTimeSlot;
this.trpCount=totalCount;
this.rrpCount=remainingCount;
}
var _rpNowTable = $("#rpNowTable");
_rpNowTable.jqGrid
({
datatype :'local',
data :capacityArray,
colNames : ['TimeSlot Id','Start Date Time(UTC)','End Date Time(UTC)','Total Capacity','Remaining Capacity','Capacity Usage(%)'],
colModel :[
{name:'rpTimeSlotId', index:'rpTimeSlotId', width: 40, align: 'center',sortable:false, hidden: true},
{name:'sDateTime', index:'sDateTime', width:40,sortable:false,align:"center"},
{name:'eDateTime', index:'eDateTime', width:40,sortable:false,align:"center"},
{name:'trpCount', index:'trpCount', width:20,sortable:false,align:"center"},
{name:'rrpCount', index:'rrpCount', width:20,sortable:false,align:"center"},
{name:'rrpPerc', index:'rrpPerc', width:40,sortable:false,align:"left",cellattr: function () {
return 'style="white-space: normal; height:90%;"'
}}
],
rowNum :50,
viewrecords :true,
height :'120%',
width :700,
rownumbers : false,
multiselect : true,
autowidth : 1,
emptyDataText:'No capacity available for selected date',
altRows :true,
altclass :'myAltRowClass',
hidegrid : false,
onSelectRow: function (id, isSelected)
{
currentPageNumber = $(".ui-pg-input").val();
var index = $.inArray(id, idsOfSelectedRows);
var _id=id;
var _rpTimeSlotId = $(this).getCell(id,'rpTimeSlotId');
var _startDate=$(this).getCell(id,'sDateTime');
var _endDate=$(this).getCell(id,'eDateTime');
var _totalCount=$(this).getCell(id,'trpCount');
var _remainingCount=$(this).getCell(id,'rrpCount');
if (!isSelected && index >= 0)
{
idsOfSelectedRows.splice(index, 1);
iDOfSelectedRows.splice(index, 1);
}
else
{
idsOfSelectedRows.push(id);
var obj=new fnTimeSlot(_id, _rpTimeSlotId, _startDate,_endDate,_totalCount,_remainingCount);
iDOfSelectedRows.push(obj);
}
}
}); //jqGrid() ends here
});// ready() ends here
</script>
<table border="0" cellspacing="1" cellpadding="4" id="rpNowTable" name="rpNowTable"></table>
<div id="pager"></div></td>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="btn-center" colspan="12">
<input type="button" class="InputButton" value="Add/Update Capacity" id="btnEditSession" name="btnEditSession" onClick="updateTotalCapacity(this.form,iDOfSelectedRows)">
</td>
</tr>
</table>
Black mark is select all checkbox which is not working
This is the button at the end of grid
On Click of edit/add button it will open a modal
最佳答案
您已使用“ multiselect：true”，因此可以使用以下选项，该选项将在网格中创建带有复选框的列。您尝试实现的所有功能似乎都直接在网格中。
您可以使用onSelectRow和onSelectAll回调（或事件jqGridSelectRow和jqGridSelectAll）
ids= [];
ids.push("<%=totalCount%>");
onSelectAll : function (ids, isSelected)
{
currentPageNumber = $(".ui-pg-input").val();
var index = $.inArray(ids, idsOfSelectedRows);
var count= 0;
for(var rowCount=ids.slice(0)[0]; rowCount<=ids.slice(-1)[0];rowCount++){
var _id=ids.slice(count)[0];;
var _rpTimeSlotId = $(this).getCell(ids.slice(count)[0];,'rpTimeSlotId');
var _startDate=$(this).getCell(ids.slice(count)[0];,'sDateTime');
var _endDate=$(this).getCell(ids.slice(count)[0];,'eDateTime');
var _totalCount=$(this).getCell(ids.slice(count)[0];,'trpCount');
var _remainingCount=$(this).getCell(ids.slice(count)[0];,'rrpCount');
if (!isSelected && index >= 0)
{
idsOfSelectedRows.splice(index, 1);
iDOfSelectedRows.splice(index, 1);
}
else
{
idsOfSelectedRows.push(id);
var obj=new fnTimeSlot(_id, _rpTimeSlotId, _startDate,_endDate,_totalCount,_remainingCount);
iDOfSelectedRows.push(obj);
}
count++;
}
}