从集合渲染三级层次结构到mvc视图

Question

我试图在MVC视图上表示一个3级嵌套集合。

这是我的代码：

<table class="table table-hover" style="vertical-align: middle">
    <tbody>
        @*Accounts*@
        @for (var counterAccount = 0; counterAccount < Model.RecordsToBeSubmitted.Count; counterAccount++)
        {
            var counterAccountSafe = counterAccount;
            <tr>
                <th scope="row">@Model.RecordsToBeSubmitted[counterAccountSafe].Account</th>
                <td>
                    <table class="table">
                        <tbody>
                            @*Locations*@
                            @for (var counterLocation = 0; counterLocation < Model.RecordsToBeSubmitted[counterAccountSafe].Locations.Count; counterLocation++)
                            {
                                var counterLocationSafe = counterLocation;
                                <tr>
                                    <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].Location</td>
                                    <td>
                                        <table class="table">
                                            <tbody>
                                                @*Pay Modes*@
                                                @for (var counterPayMode = 0; counterPayMode < Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes.Count; counterPayMode++)
                                                {
                                                    var counterPayModeSafe = counterPayMode;
                                                    <tr>
                                                        <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes[counterPayModeSafe].PaymentMode</td>
                                                        <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes[counterPayModeSafe].BillDetails.Count</td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </tbody>
</table>

这是渲染的内容：

它根本不具体，但确实显示了我的目标。我可以访问Kendo Pivot MVC，但我不需要额外的功能。我只需要整齐地以这种形式显示这些数据。现在，由于嵌套表我无法对齐它，我不能使用表头

楷模）：

public class GrpSummaryResult : IBdo
{
    [DataMember]
    public bool IsProcessable { get; set; }

    [DataMember]
    public int TotalBills { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupAccount> Accounts { get; set; }

}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupAccount : IBdo
{
    [DataMember]
    public string Account { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupLocation> Locations { get; set; }

}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupLocation : IBdo
{
    [DataMember]
    public int Location { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupPaymentMode> PaymentModes { get; set; }
}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupPaymentMode : IBdo
{
    [DataMember]
    public int PaymentModeId { get; set; }

    [DataMember]
    public string PaymentMode { get; set; }

    [DataMember]
    public IList<BillInfoDetail> BillDetails { get; set; }
}

[DataContract(Namespace = Constants.BdoNamespace)]
public class BillInfoDetail : IBdo
{
    [DataMember]
    public string BillNumber { get; set; }

    [DataMember]
    public string ServiceName { get; set; }

    [DataMember]
    public decimal Fees { get; set; }

}

更新：

我还带来了平面数据，因为“集合中的集合”（上图）对我不起作用。

平面数据模型：

[DataContract(Namespace = Constants.BdoNamespace)]
public class BillInfoDetail : IBdo
{
    [DataMember]
    public string FocusReferenceNumber
    {
        get => $"{BillNumber}-{PaymentModeId}";
        private set { }
    }

    ...

    [DataMember]
    public BillInfo Bill { get; set; }

}

public class BillInfo : IBdo
{

    [DataMember]
    public string BillNumber { get; set; }

    [DataMember]
    public int PayModeId { get; set; }

    [DataMember]
    public int CashierId { get; set; }

    [DataMember]
    public string PayMode { get; set; }

    [DataMember]
    public string CustomerCode { get; set; }

    [DataMember]
    public string CustomerName { get; set; }

    [DataMember]
    public string AccountGroup { get; set; }

}

码：

@(Html.Kendo().PivotConfigurator()
      .Name("configurator")
      .HtmlAttributes(new { @class = "hidden-on-narrow" })
      .Filterable(true)
      .Sortable()
      .Height(580)
)

@(Html.Kendo().PivotGrid<DA.Systems.Focus.Business.BDO.BillInfoDetail>()
      .Name("pivotGrid")
      .HtmlAttributes(new { @class = "hidden-on-narrow" })
      .Filterable(true)
      .Configurator("#configurator")
      .ColumnWidth(120)
      .Height(570)
      .BindTo(Model.FlatData)
      .DataSource(dataSource => dataSource
          .Ajax()
          .Schema(schema => schema
              .Model(m => m.Field("Account", typeof(string)).From("Bill.AccountGroup"))
              .Model(m => m.Field("PaymentMode", typeof(string)).From("Bill.PayMode"))
              .Cube(cube => cube
                  .Dimensions(dimensions =>
                  {
                      dimensions.Add("Account").Caption("Accounts");
                      dimensions.Add(model => model.CashierId).Caption("Location");
                      dimensions.Add("PaymentMode").Caption("Payment Modes");
                  })
                  .Measures(measures => {
                      measures.Add("Bills").Format("{0}").Field(model => model.FocusReferenceNumber).AggregateName("count");
                  })
              ))
          .Columns(columns =>
          {
              columns.Add("Account").Expand(true);
              columns.Add("PaymentMode");
          })
          .Measures(measures => measures.Values("Bills"))
          .Events(e => e.Error("onError"))
      )
)

我尝试使用平面数据的Kendo PivotGrid MVC：

根本不喜欢它。

Answer 1

我无法找到解决方案，因为我希望用户界面明智。所以，我找到了一个名为jqRowSpanizer的JavaScript库。我发送了平面数据并使用此库来合并行，相同的值并获得所需的结果。