在MVC3中使用RAZOR進行WebGrid對齊

Question

我想在MVC 3中的WEBGRID的所有列中設置不同的寬度和對齊方式。這意味着在上面的代碼中我有5列現在我想設置不同的對齊方式和寬度所有的標題。

下面是我的代碼：

@{WebGrid grid = new WebGrid(); 
    if (@Model.VendorItemsList != null) 
    { 
     grid = new WebGrid(source: @Model.VendorItemsList, ajaxUpdateContainerId:   "gridSearch", canSort: true, rowsPerPage: Model.PageSize); 
    } 
} 
<div id="gridSearch" class="tableGrid"> 
    @{    
     @grid.GetHtml(
      mode: WebGridPagerModes.All, 
      columns: grid.Columns(
      grid.Column("VendorItemName", header: @GeneralResource.Vendor + " " + @GeneralResource.Item + " " + @GeneralResource.Name), 
      grid.Column("ItemName", header: @GeneralResource.Item), 
      grid.Column("ItemCategoryName", header: @GeneralResource.Category), 
      grid.Column("VendorName", header: @GeneralResource.Vendor) 
      )) 
     } 
    } 
</div> 

Answer 1

由於沒有內置的方式來控制寬度，你將不得不使用CSS樣式。首先給類的標題和正文行：

@grid.GetHtml(
    headerStyle: "header_row", 
    rowStyle: "item_row" 
    // ... 
) 

然後，使用第n個孩子僞類選擇他們的風格，例如：

tr.header_row th:nth-child(1) { width: 100px; } 
tr.header_row th:nth-child(2) { width: 75px; } 
tr.header_row th:nth-child(3) { width: 50px; } 

tr.item_row td:nth-child(1) { width: 100px; } 
tr.item_row td:nth-child(2) { width: 75px; } 
tr.item_row td:nth-child(3) { width: 50px; }