【问题标题】:Issue on level 3 sub child in Nested table-View in asp.net MVCasp.net MVC 中嵌套表视图中级别 3 子子项的问题
【发布时间】:2021-11-22 09:15:33
【问题描述】:

我已经在我的项目中使用嵌套表视图到第二级它运行良好,但问题是当我添加第三级子子时。当我单击 2 级子子按钮以展开 3 级子子视图时,它只是折叠表格。基本上,这个想法是每个客户都有一些销售 ID,它显示在第二级子子嵌套表中,并且在每个销售 ID 下,有一些我想在第三级子子嵌套表中显示的项目。请帮我解决这个问题。我在这里做错了什么? 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>

【问题讨论】:

    标签: javascript c# asp.net model-view-controller


    【解决方案1】:

    您似乎为第三级子表添加了一个新的&lt;tr&gt;。所以请在&lt;td&gt; 中添加一个嵌套的子表来扩展它。

    【讨论】:

      【解决方案2】:

      我错误地在两个“数据目标”行中输入了相同的 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>

      【讨论】:

        【解决方案3】:

        修复id,你绑定了错误的id。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2017-04-13
          • 2013-01-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-12-15
          • 1970-01-01
          相关资源
          最近更新 更多