我将视图显示为模式弹出窗口，该视图的表格如下所示
<table id="tdServiceList" class="table table-bordred table-striped">
<thead>
<tr>
<th>SL. No.</th>
<th>Status</th>
<th>Service Name</th>
<th>Public Service No</th>
<th>Dept</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="click">[+]</a></td>
<td> 1</td>
<td>KHARWAR NAGAR-SOMESHWAR JN-NEW</td>
<td>105</td>
<td>BRT</td>
</tr>
<tr>
<td colspan="5">
<table id="tdServiceListDetails" class="table table-bordred table-striped" style="display: table;">
<thead>
<tr>
<th>Master Schedule Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Demo master schedule</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1036,4 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>master sch2</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1037,4 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>master schedule june</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1052,4 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><a class="click">[+]</a></td>
<td> 2</td>
<td>UDHANA-SACHIN G.I.D.C NAKA</td>
<td>101A</td>
<td>BRT</td>
</tr>
<tr>
<td colspan="5">
<table id="tdServiceListDetails" class="table table-bordred table-striped" style="display: none;">
<thead>
<tr>
<th>Master Schedule Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1010 schedule1</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1039,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>1010 sch2</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1040,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>primary master schedule</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1041,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>primary2</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1042,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>primary3</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1043,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>demo plan new</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1044,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>surat plan</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1045,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>surat plan new</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1046,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>surat mc</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1047,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>demo surat mc</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1048,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
<tr>
<td>demo 41</td>
<td>
<button alt="View Master Schedule Plan" title="View Master Schedule Plan" onclick="ViewMasterSchedule( 1051,1010 )" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
这里使用jquery创建外部表体和内部表。
function DisplayServiceDetails(spaging, offset) {
debugger;
currentPageNo = spaging;
var url = "/ServiceManagement/TransitPlanServiceDisplay/";
var data = { 'paging': spaging, 'Offset': offset };
$.ajax({
url: url,
data: data,
cache: false,
type: "POST",
success: function (outPut) {
var data = JSON.parse(outPut);
if (data.length > 0) {
$('#tdServiceList tbody').remove();
for (var x = 0; x < data.length; x++) {
var serialno = x + 1;
var result = data[x];
var blockingStatus = '';
var addRoute = '@Url.Content("~/Areas/ScheduleManagement/ServiceManagement/ViewService")';
var id = '?id=' + result.ServiceGroupId
/********* updating blocking status*********/
if (result.TripStatus == 0) {
blockingStatus = ' <input type="text" class="service-status timesheet-requested " disabled >';
}
else if (result.BlocKingStatus == 0 && result.TripStatus == 1) {
blockingStatus = ' <input type="text" class="service-status timesheet-created " disabled >';
}
else if (result.BlocKingStatus == 1) {
blockingStatus = '<input type="text" class="service-status pending" disabled >';
}
else if (result.BlocKingStatus == 2) {
blockingStatus = '<input type="text" class="service-status blocking-done" disabled >';
}
else if (result.BlocKingStatus == 3) {
blockingStatus = '<input type="text" class="service-status approved" disabled >';
}
/******** hard coding service priority**********/
var priority = '';
if (result.ServicePriority == 1) {
priority = "High";
}
else if (result.ServicePriority == 2) {
priority = "Normal";
}
else if (result.ServicePriority == 3) {
priority = "Low";
}
/******** Enable blocking only after doing Trip generation**********/
var checkbox = '';
if (result.TripStatus == 0) {
checkbox = "<input type='checkbox' id=" + result.ServiceGroupId + " disabled class='checkthis'/>";
}
else if (result.TripStatus == 1) {
checkbox = "<input type='checkbox' id=" + result.ServiceGroupId + " class='checkthis' />";
}
/*********Enable/Disable view Blocking sheet*********/
var viewBlocking = '';
if (result.BlocKingStatus == 2 || result.BlocKingStatus == 3) {
viewBlocking = " <a alt='View Blocking Sheet' title='View Blocking Sheet' href=" + "@Url.Content("/ScheduleManagement/Blocking/BlockingSheet")" + id + " class='btn btn-default btn-xs'><span class='glyphicon glyphicon-list-alt'></span></a>";
}
else {
viewBlocking = " <a alt='View Blocking Sheet' title='View Blocking Sheet' class='btn btn-default btn-xs linkdisabled'><span class='glyphicon glyphicon-list-alt'></span></a>";
}
/******************/
var innerTableContent = '';
for (var m = 0; m < result.MasterSchedules.length; m++) {
innerTableContent += '<tr><td>' + result.MasterSchedules[m].MasterScheduleName + '</td>' +
"<td><button alt='View Master Schedule Plan' title='View Master Schedule Plan' onclick='ViewMasterSchedule( " + result.MasterSchedules[m].ServiceMasterScheduleID + "," + result.ServiceGroupId + " )' class='btn btn-default btn-xs'><span class='glyphicon glyphicon-eye-open'></span></a> </td></tr>";
}
$("#tdServiceList").append("<tr><td><a class='click' >[+]</a></td>" +
"<td>" + checkbox + ' ' + serialno + "</td>" +
"<td>" + result.ServiceGroupeName + "</td>" +
"<td>" + result.PublicServiceNo + "</td>" +
"<td>" + result.Department + "</td>" +
@* "<td> <a alt='View' title='View' href=" + "@Url.Content("/ScheduleManagement/ServiceManagement/ViewService")" + id + " class='btn btn-default btn-xs'><span class='glyphicon glyphicon-eye-open'></span></a> " +
"<a alt='Edit' title='Edit' href=" + "@Url.Content("/ScheduleManagement/ServiceManagement/CreateService")" + id + " class='btn btn-default btn-xs'><span class='glyphicon glyphicon-pencil'></span></a> " +
//"<a alt='Delete' title='Delete' href=" + "@Url.Content("/ScheduleManagement/ServiceManagement/DeleteService")" + id + " class='btn btn-default btn-xs'><span class='glyphicon glyphicon-trash'></span></a>" +
"<button class='btn btn-default btn-xs' data-title='Delete' onclick='GetId( " + result.ServiceGroupId + " )' data-toggle='modal' data-target='#delete'><span class='glyphicon glyphicon-trash'></span></button></span>" +
viewBlocking + "</td>" +*@
"</tr>" +
"<tr> <td colspan='5'>" +
"<table id='tdServiceListDetails' class='table table-bordred table-striped' style='display: none;'>" +
"<thead><tr><th>Master Schedule Name</th><th>Action</th></tr></thead><tbody>" +
innerTableContent + "</tbody></tr></table></td></tr>"
);
serialno = "";
}
//------------------pagination-----------
debugger;
var spagee = 1;
var stotalItems = 0;
if (spaging == 0) {
if (data.length > 0) {
stotalItems = data[0].TotalCount;
spagee = (stotalItems / offset);
}
//pagenum ends
} //endif
else {
spagee = spaging
if (data.length > 0) {
stotalItems = data[0].TotalCount;
}
}
//else end
var offset = 20;
var spageCount = ((spagee - 1) * offset) | 0;
var stotalPages = 0;
var Previous = 0;
var Next = 0;
stotalPages = (stotalItems / offset) | 0;
if (stotalItems % offset != 0) {
stotalPages++;
}
PagesCount = stotalPages;
Previous = spagee - 1;
if (stotalItems > offset) {
Next = spagee + 1;
}
else {
Next = 0;
}
var spaging = '';
spaging += "<ul>";
if (Previous != 0) {
spaging += "<li>";
spaging += "<a href=\"javascript:DisplayServiceDetails(" + Previous + ");\" > Previous </a>";
spaging += "</li>";
}
//end previous
for (var p = 1; p <= PagesCount; p++) {
spaging += "<li>";
if (p == Previous + 1) {
spaging += "<a href=\"javascript:DisplayServiceDetails(" + p + ");\" class = \"active\" >" + p + "</a>";
}
//end if
else if (p <= 10) {
spaging += "<a href=\"javascript:DisplayServiceDetails(" + p + ");\" >" + p + "</a>";
}
//endelse
spaging += "</li>";
}
//end for
if (Next != PagesCount + 1 && Next != 0) {
spaging += "<li>";
spaging += "<a href=\"javascript:DisplayServiceDetails(" + Next + ");\" > Next </a>";
spaging += "</li>";
}
//end next
spaging += "</ul>";
// alert(spaging);
$('#pagination').html(spaging);
//---------------------------------------
}
else {
$('#tdServiceList tbody').remove();
$("#tdServiceList").append("<tr><td> No Records found</td></tr>");
}
},
error: function (response) {
alert("error : " + response);
}
});
}
我使用切换选项来显示内部表
// this is added for testing purpose. tried to off click event
$(document).off('click').on('click', '[class=click]', function () {
// function body
alert('2');
});
$(document).on('click', '[class=click]', function (e) {
e.preventDefault();
debugger;
alert('1');
$(this).closest('tr').next().find('table:first').toggle();
});
现在的问题是，数据切换选项正在执行多次。所以第一次它会正常工作。第二次它不会工作，第三次再次工作正常。
我尝试添加$（this）.off（'click'）;并返回$ document.off（'click'，e）;也在点击功能..但两个都没有用。
答案 0 :(得分：1)
您必须unbind事件监听器和re-bind它：
$(document).off('click', '[class=click]').on('click', '[class=click]', function () {
它会有所帮助。
注意：不要在弹出视图中包含JS，否则会反复加载，而是将其放在父视图中并使用上面的代码。