我已经在项目上实现了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
答案 0 :(得分：1)
您使用了“multiselect：true”，因此您可以使用以下选项创建带有网格中复选框的列。您尝试实现的所有功能似乎都直接在网格中。
你可以使用onSelectRow和onSelectAll（或事件jqGridSelectRow和jqGridSelectAll）进行回调
{{1}}
}
答案 1 :(得分：0)
重构代码后，我可以在jqgrid
中选择all<table id="capacityTable" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#aaaaaaaaa"><script type="text/javascript">
'use strict';
var currentPageNumber;
var iDOfSelectedRows = [];
ids= [];
$(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%>",
ids: ids.push("<%=id%>"),
<%
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);
}
},
onSelectAll: function (id, isSelected)
{
currentPageNumber = $(".ui-pg-input").val();
var index = $.inArray(id, 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 _totalProctorCount=$(this).getCell(ids.slice(count)[0],'trpCount');
var _remainingProctorCount=$(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 fnRemoteProctorTimeSlot(_id, _rpTimeSlotId, _startDate,_endDate,_totalProctorCount,_remainingProctorCount);
iDOfSelectedRows.push(obj);
}
count++;
}
}
}); //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>