Question

我正在创建一个多级可扩展的DataTable，它可以达到n个级别。为此，我创建了一个部分视图，通过点击＆＃39;帐户＆＃39;从主视图调用。表中的列。同样，在“部分视图”中，我再次使用“AccountID”的不同值加载相同的“局部视图”。我成功地将DataTable扩展到了2个级别。
我的控制器操作是

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);
        }

主视图是

    <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>

当我尝试扩展第二级时，请求转到Controller，我可以看到正确返回的数据。但我得到的错误如 enter image description here

由于上面的图像有点混乱，让我向你解释一下 SNo 1,2,3是来自View的Datatable行，然后SNo 5,6,8是3的孩子，当我用SNo 6扩展行时，我得到错误并且它还显示SNo 9这是孩子现在，如果我点击同时拥有其子节点的SNo 9，则会调用该操作并将正确的数据返回到视图，但视图中不会发生任何更改，并且控制台中不会出现Javascript错误。 /> 现在我有以下问题：

我的做法是对的吗？你怎么解决这个问题？
如何在重复调用中为表生成不同的ID 相同的部分视图？

请忍受冗长的问题。我无法进一步削减它。
请指出我正确的方向 ******更新******
在Class中使用Partial View作为选择器，得到了第二个问题的答案。还摆脱了错误警报。这是我更新的部分视图。请注意这些变化。

<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>

但我仍然不能让它在2个级别之后显示数据。是转到操作并获取数据，但不显示数据，也没有Console错误。

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

0 个答案: