mvc3 WebGrid中的两行标题答案

【问题标题】：two row header in mvc3 WebGridmvc3 WebGrid中的两行标题
【发布时间】：2013-06-28 05:35:17
【问题描述】：

有没有办法在 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

【解决方案1】：

服务器端解决方案：

@(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>")))

客户端（假设视图中只有一个 webgrid，您可以使用一些 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>

【讨论】：

【解决方案2】：

您可以使用 html 元素构建它。您应该使用 colspan 和 rowspan 对单元格进行分组。看看这个link;

【讨论】：