Jquery 多级可扩展主详细信息数据表

我正在创建一个多级可扩展数据表，可以达到n个级别。为此，我创建了一个局部视图，在单击表中的“Account”列时从主视图调用该视图。类似地，在部分视图中，我使用“AccountID”的不同值再次加载相同的部分视图。我已经成功地将DataTable扩展到了两个级别
我的控制器操作是

public ActionResult GetChildTrialBalance(DateTime? fromDate, DateTime? toDate, int? pageNo, int? pageSize, int? AccountId)
        {
            fromDate = fromDate ?? DateTime.Today;// : fromDate;
            toDate = toDate ?? DateTime.Today;
            pageNo = pageNo ?? 1;
            pageSize = pageSize ?? 10;
            ViewBag.FromDate = fromDate;
            ViewBag.ToDate = toDate;
            IList<Ledger_DTO> listTrailBalance = null; 
            listTrailBalance = Ledgers.GetTrailBalance(BusinessId, UserId, fromDate, toDate, pageNo, pageSize, sortColumns, sortDirection);
            var selected = listTrailBalance.Where(x => x.ParentAccountId == AccountId).ToList();
            listTrailBalance = selected;
            return View(listTrailBalance);
        }   

---

但我仍然不能让它显示两个级别后的数据。确实转到操作并获取数据，但不显示数据，也没有

控制台
错误。
您实现了吗？我目前正在探索一组庞大数据（以百万计）的多级分组选项，这些数据可以分组显示，并支持拖动列来显示列ngGrid
，
SlickGrid
，
IgniteUI PivotGrid
。不@VivekVardhan，实际上我改变了策略，通过jQuery生成它，但已经有一段时间没有看到它了。无论如何，谢谢你提供了其他可能的选择。事实上，我是在问，如果你能完成，你也许能帮上忙，因为我需要帮助。：）@VivekVardhan，正如你所看到的，我已经完成了两个级别，我想对于你的数据，你可以检查这个代码是否有效。
    <script>
        $(document).ready(function () {
            var oTable;
            $('#TbTrialBalance tbody td span').click(function () {
                debugger;
                var nTr = this.parentNode.parentNode;
                if ($(this).data("status")=="open") {
                    $(this).data('status', 'closed');
                    oTable.fnClose(nTr);
                }
                else {
                    $(this).data('status','open');
                    var accountid = $(this).attr("rel");
                    $.get("GetChildTrialBalance?AccountId=" + accountid, function (trbals) {
                        oTable.fnOpen(nTr, trbals, 'details');
                    });
                }
            });

            /* Initialize table and make first column non-sortable*/
            oTable = $('#TbTrialBalance').dataTable({
                "bJQueryUI": true,
                "aoColumns": [
                                    { "bSortable": false, "bSearchable": false },
                                    null,
                                    null,
                                    null
                ]
            });
        });
    </script>
    .
    <!--removed for brevity-->
    .
<table id="TbTrialBalance">
<thead>
<tr>
<th>S.No</th>
<th>Account</th>
<th>Debit $</th>
<th>Credit</th>
</tr>
</thead>

<tbody>
 @foreach (StratusAccounting.Models.Ledger_DTO item in Model)
 {
 <tr>
  <td>@item.Sno</td>
 <td><span rel="@item.AccountId" style="cursor:pointer" data-status="closed">@item.Description</span></td>
 <td>@item.Debit</td>
 <td>@item.Credit</td>
 </tr>
 }
 </tbody>
 </table> 

<script>

    $(function() {

        var oTable;
        $('#TbChildTrialBalance tbody td span').unbind('click').click(function () {
            debugger;
            var nTr = this.parentNode.parentNode;
            if ($(this).data("status") == "open") {
                $(this).data('status', 'closed');
                oTable.fnClose(nTr);
            }
            else {
                $(this).data('status', 'open');
                var accountid = $(this).attr("rel");
                $.get("GetChildTrialBalance?AccountId=" + accountid, function (trbals) {
                    oTable.fnOpen(nTr, trbals, 'details');
                });
            }
        });

        /* Initialize table and make first column non-sortable*/
        oTable = $('#TbChildTrialBalance').dataTable({
            "bJQueryUI": true,
            "aoColumns": [
                                { "bSortable": false, "bSearchable": false },
                                null,
                                null,
                                null
            ]
        });
        });


</script>

<table id="TbChildTrialBalance">
 <thead>
<tr>
<th>S.No</th>
<th>Account</th>
<th>Debit $</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
 @foreach (StratusAccounting.Models.Ledger_DTO item in Model)
 {
  <tr class="odd">
  <td class="hidden-480 ">@item.Sno</td>
  <td class="  sorting_1"><span rel="@item.AccountId" style="cursor:pointer" data-status="closed">@item.Description</span></td>
  <td class=" ">@item.Debit</td>
  <td class=" ">@item.Credit</td>
  </tr>
  }
 </tbody>
</table>

<script>

    $(function() {

        var oTable;
        $('.clsChildTBal tbody td span').unbind('click').click(function () {
            debugger;
            var nTr = this.parentNode.parentNode;
            if ($(this).data("status") == "open") {
                $(this).data('status', 'closed');
                oTable.fnClose(nTr);
            }
            else {
                $(this).data('status', 'open');
                var accountid = $(this).attr("rel");
                $.get("GetChildTrialBalance?AccountId=" + accountid + "&fromDate=" + $("#fromDate").val() + "&toDate=" + $("#toDate").val(), function (trbals) {
                    oTable.fnOpen(nTr, trbals, 'details');
                });
            }
        });

        /* Initialize table and make first column non-sortable*/
        if (oTable != null)
            oTable.fnDestroy();
        oTable = $('.clsChildTBal').dataTable({
            "bJQueryUI": true,
            "aoColumns": [
                                { "bSortable": false, "bSearchable": false },
                                null,
                                null,
                                null
            ],
            "bRetrieve": true,
            "bFilter": false,
            "bInfo": false,
            "bPaginate": false,
            "fnDrawCallback": function (oSettings) {
                $(oSettings.nTHead).hide();
            }
        });
        });


</script>

<table class="table table-striped table-bordered table-hover table-full-width dataTable clsChildTBal" aria-describedby="sample_2_info">



                                    <tbody role="alert" aria-live="polite" aria-relevant="all">

                                        @for(int i=0; i<Model.Count;i++)
                                        {
                                            int a = i + 1;
                                           <tr class="odd">
                                                <td class="serial-col">@a</td>
                                                 <td class="desc-col">@if(Model[i].IsParent==1){<span rel="@Model[i].AccountId" style="cursor:pointer" data-status="closed">@Model[i].Description</span>}
                                                    else
                                                    {
                                                             @Model[i].Description;           }
                                                </td>
                                                <td class="debit-col">@Model[i].Debit</td>
                                                <td class="credit-col">@Model[i].Credit</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>