mvc3中的兩行標題WebGrid

Question

有什麼辦法可以在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（所以我可能會錯過了明顯的解決方案）。

Answer 1

您可以使用html元素來構建它。您應該使用colspan和rowspan將單元格分組。看看link;

Answer 2

服務器端解決方案：

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