嵌套 table-View asp.net MVC 中的 3 级子子项问题
Issue on level 3 sub child in Nested table-View in asp.net MVC
我已经使用嵌套 table 查看我的项目直到第 2 级，它运行良好，但问题是当我添加第 3 级子子项时。当我单击第二级子子按钮以展开第三级子子视图时，它只是折叠 table。基本上，这个想法是每个客户都有一些销售 ID，显示在嵌套的第二级子子 table 中，并且在每个销售 ID 下有一些我想显示在嵌套的第三级子子中的项目 table.请帮我解决这个问题。我在这里做错了什么？ In the picture you can see the nested table view up to 2nd level sub child
<script type="text/javascript">
$(document).ready(function () {
$('.parentTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.subTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.bb').on('click', function (e) {
$('.bb').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
$('.subbutton').on('click', function (e) {
$('.subbutton').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
});
</script>
<style>
.hiddenRow {
padding: 0 !important;
}
</style>
@model IEnumerable<DEtelecom.ViewModel.VmCustomerModel>
@{
ViewBag.Title = "Customer Sales Information";
WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button">
</button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:C}", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
{
<tr class="d-flex">
<td scope="row" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.Amount))
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
您似乎为第三级 child table 添加了一个新的 <tr>。因此，请将嵌套的 child table 添加到应该扩展它的 <td>。
我错误地在 'data-target' 行中输入了相同的 ID。应该是两个
属于子行的不同 ID。我在下面分享功能齐全的代码：
<script type="text/javascript">
$(document).ready(function () {
$('.parentTable .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.subTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
});
function btnToggleClass() {
$('#togglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
function btn2ToggleClass() {
$('#subtogglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
</script>
table.customTable {
table-layout: auto !important;
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 10%;
}
table.table-fit {
width: 100% !important;
table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
width: auto !important;
}
th {
background-color: black;
color: white;
}
> Mistakenly I put same ID in both 'data-target' row. It should be two
> different ID that belongs to the child row.
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button" onclick="btnToggleClass()" >
</button>
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(sales.SalesID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button" onclick="btn2ToggleClass()"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(sales.SalesID)">
<table class="table table-hover subSubTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
{
<tr class="d-flex">
<td scope="row" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.Amount))
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
修复ID，你绑定了错误的ID。
我已经使用嵌套 table 查看我的项目直到第 2 级，它运行良好，但问题是当我添加第 3 级子子项时。当我单击第二级子子按钮以展开第三级子子视图时，它只是折叠 table。基本上，这个想法是每个客户都有一些销售 ID，显示在嵌套的第二级子子 table 中，并且在每个销售 ID 下有一些我想显示在嵌套的第三级子子中的项目 table.请帮我解决这个问题。我在这里做错了什么？ In the picture you can see the nested table view up to 2nd level sub child
<script type="text/javascript">
$(document).ready(function () {
$('.parentTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.subTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.bb').on('click', function (e) {
$('.bb').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
$('.subbutton').on('click', function (e) {
$('.subbutton').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
});
</script>
<style>
.hiddenRow {
padding: 0 !important;
}
</style>
@model IEnumerable<DEtelecom.ViewModel.VmCustomerModel>
@{
ViewBag.Title = "Customer Sales Information";
WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button">
</button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:C}", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
{
<tr class="d-flex">
<td scope="row" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.Amount))
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
您似乎为第三级 child table 添加了一个新的 <tr>。因此，请将嵌套的 child table 添加到应该扩展它的 <td>。
我错误地在 'data-target' 行中输入了相同的 ID。应该是两个 属于子行的不同 ID。我在下面分享功能齐全的代码：
<script type="text/javascript">
$(document).ready(function () {
$('.parentTable .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.subTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
});
function btnToggleClass() {
$('#togglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
function btn2ToggleClass() {
$('#subtogglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
</script>
table.customTable {
table-layout: auto !important;
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 10%;
}
table.table-fit {
width: 100% !important;
table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
width: auto !important;
}
th {
background-color: black;
color: white;
}
> Mistakenly I put same ID in both 'data-target' row. It should be two
> different ID that belongs to the child row.
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button" onclick="btnToggleClass()" >
</button>
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(sales.SalesID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button" onclick="btn2ToggleClass()"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(sales.SalesID)">
<table class="table table-hover subSubTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
{
<tr class="d-flex">
<td scope="row" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.Amount))
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
修复ID，你绑定了错误的ID。