时间戳

首页 > 解决方案 > 如何为要在表格中显示的数据动态分配行跨度？

jquery - 如何为要在表格中显示的数据动态分配行跨度？

问题描述

我正在我的 MVC 5 Web 应用程序中创建一个表格来显示自动覆盖。例如，说车辆覆盖率。我正在尝试找到一种方法来动态分配单元格的行跨度值。例如，如果您往下看，汽车保单下的一辆车有多个承保范围。我希望将这些报道显示为：

示例显示

在网上做了额外的研究后，我找不到任何方法来做到这一点。我曾想过为每一列添加一个属性，例如

public string PolicyNumber { get; set; }
public int    PolicyNumberRowspan { get; set; }

ETC...

并通过 LINQ 比较该策略编号或车辆 ID 是否已存在于前一行中来分配值，以在控制器中分配 rowspan 值并在我的视图中使用它。

有没有其他更有效的方法来实现这一目标？比如通过jQuery什么的？

标签： jqueryasp.net-mvclinq

解决方案

供您参考，我为您创建了一个小提琴： https ://dotnetfiddle.net/wVqutR

你必须改变你的模型是这样的（正如你提到的，你在政策和覆盖范围之间有一对多的关系

public class Policy
    {
        public string PolicyNumber  {get;set;}

        public string VehicleID{get;set; }

        public string Model {get;set;}

        public string Year  {get;set;}

        public string Make {get; set;}

        public IEnumerable<string> Coverages {  get;set;}
    }

您的控制器将是（我已经加载了一些示例数据）

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        var policies = new List<Policy>()
        {new Policy()
        {PolicyNumber = "2121", VehicleID= "2213", Model = "Abc", Year = "2011", Make = "sad", Coverages  = new List<string>()
        {"dfdfs", "dfdf"}}, new SampleViewModel()
        {Policy= "42423", VehicleID= "24422", Model = "Abdwc", Year = "2012", Make = "sad", Coverages = new List<string>()
        {"asda", "dads"}}};
        return View(policies);
    }

还有你的 MCV 页面

@model IEnumerable<HelloWorldMvcApp.Policy>
@{
    Layout = null;
}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <h1>Hello Stranger</h1>

            <div><b>Table Format Data Displaying in ForEach</b><br /></div>  
<table class="table table-bordered table-responsive table-hover">  
    <tr>  
        <th>PolicyNumber</th>  
        <th>VehicleID</th>  
        <th>Model </th>  
        <th>Year </th>  
        <th>Make </th> 
            <th>Coverage </th> 
    </tr>  
    @foreach (var d in Model)  
    {  
        <tr>  
            <td rowspan="@d.Coverages.Count()">@d.PolicyNumber</td>  
            <td rowspan="@d.Coverages.Count()">@d.VehicleID</td>  
            <td rowspan="@d.Coverages.Count()">@d.Model</td>  
            <td rowspan="@d.Coverages.Count()">@d.Year</td>  
            <td rowspan="@d.Coverages.Count()">@d.Make</td>  
@{int i = 0; }
            @foreach (var cov in d.Coverages)
                           {
                                if (i > 0)
                               {
                                   @:</tr><tr>
                               }
                                <td >@cov</td>
                                    i++;
                           }
        </tr>  
    }  
            </table>

            </div>
        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript">



        </script>
    </body>
</html>

推荐阅读