заголовок двух строк в mvc3 WebGrid

Есть ли способ иметь заголовок из двух строк в WebGrid?

Я искал способ сделать пользовательский рендеринг для заголовка или способ рендеринга только тела таблицы (без тегов таблицы), но ничего не нашел.

Я хотел бы создать веб-сетку, которая выглядит примерно так:

-------------------------------------------
|grouped cols                |grouped cols|
-------------------------------------------
|col1 |  col2 | col3 | col4  | col5 |col6 |
-------------------------------------------
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------
|d1   |  d2   | d3   | d4    | d5   |d6   |
-------------------------------------------

Имейте в виду, что я новичок в mvc3 (поэтому я могу пропустить очевидное решение).


asp.net-mvc asp.net-mvc-3 webgrid
person Community    schedule 01.07.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Серверное решение:

@(new HtmlString(grid.GetHtml(Your grid definition).ToHtmlString()
    .Replace("<thead>",""<thead><tr class='webgrid-header'><th scope='col' colspan='4'>cols 1 to 4</th><th scope='col' colspan='2'>cols 5 and 6</th></tr>")))

Клиентская сторона (предполагая, что в представлении есть только одна веб-сетка, вы можете использовать jquery):

@Scripts.Render("~/bundles/jquery")
<script>
    $(function () {
        var th = $("<tr class='webgrid-header'><th scope='col' colspan='4'>col 1 to 4</th><th scope='col' colspan='2'>col 5 and 6</th></tr>")
        $("thead").prepend(th);
    });
</script>
person CFreitas    schedule 12.09.2013

arrow_upward
0
arrow_downward

Вы можете создать его с помощью элемента html. Вы должны использовать colspan и rowspan для группировки ячеек. Взгляните на эту ссылку;

person karaxuna    schedule 01.07.2013