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

我找不到他们想要UI明智的解决方案。因此，我找到了一个名为jqRowSpanizer的JavaScript库。我发送了平面数据，并使用该库按行合并了相同的值，并得到了所需的结果。

从集合到MVC视图呈现三级层次结构

1 个答案: