Как использовать rowspan в MVC-Razor, без JavaScript? - PullRequest
Новая
       11

Как использовать rowspan в MVC-Razor, без JavaScript?

2 голосов
/ 04 ноября 2011

Как объединить ячейки в таблице, используя rowspan в представлении Razor?

  • Без использования javascript / jQuery.
  • Источником таблицы является IEnumerable.
  • Некоторые элементы в источнике будут иметь одинаковое значение в определенном поле, и это те элементы, которые мы хотим объединить в одну ячейку.
  • Мы не знаем, сколько раз данное значение повторяется.

Полученный HTML-код должен выглядеть примерно так: 

<table>
    <tr>
        <td rowspan="2">Column 1 row 1</td>
        <td>Column 2 row 1</td>
    </tr>
    <tr>
        <td>Column 2 row 2</td>
    </tr>
    <tr>
        <td rowspan="3">Column 1 row 3</td>
        <td>Column 2 row 3</td>
    </tr>
    <tr>
        <td>Column 2 row 4</td>
    </tr>
    <tr>
        <td>Column 2 row 5</td>
    </tr>
</table>

ПРАВКА, чтобы добавить источник данных и желаемый результат:

Источник данных может быть чем-токак продукты с категориями.Пример:

Категории

  • Электроника
  • Продукты питания

Продукты

  • Ноутбук (электроника)
  • iPod (электроника)
  • Телевизор (электроника)
  • Кофе (бакалея)
  • Печенье (бакалея)

Результат

╔═════════════╦════════╗
║ Electronics ║ Laptop ║
║             ║ iPod   ║
║             ║ TV     ║
╠═════════════╬════════╣
║ Groceries   ║ Coffee ║
║             ║ Cookies║ 
╚═════════════╩════════╝

Единственный способ, которым я имею в виду, - это использовать Linq, чтобы подсчитать, сколько раз значение находится в списке, но я хотел знать, есть ли у кого-нибудь лучшее решение.Спасибо!

1 Ответ

6 голосов
/ 21 марта 2014

Попробуйте что-то вроде этого. 

<table>
    <tr>
        <th>Movie</th>
        <th>Person</th>
    </tr>

    @foreach (var byMovies in elements.GroupBy(x => x.Movie)
                                      .OrderBy(movie => movie.Key.Name))
    {
        var secondRowOrHigher = false;
        @:<tr>
        @:<td rowspan="@byMovies.Count()">@byMovies.Key.Name</td>

        foreach (var ticket in byMovies.OrderBy(x => x.Person.Name))
        {
            if (secondRowOrHigher)
            {
                @:<tr>
            }
            secondRowOrHigher = true;

            <td>@ticket.Person.Name</td>
            @:</tr>
        }
    }
</table>

и классы только для того, чтобы иметь картинку 

public class TicketInfo
{
    public Movie Movie { get; set; }
    public Person Person { get; set; }
}

public class Person
{
    public string Name { get; set; }
}

public class Movie
{
    public string Name { get; set; }
}
...