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"
    // ...
)

然后使用nth-child伪类选择器设置它们的样式，例如：

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; }

使用RAZOR在MVC3中进行WebGrid对齐

1 个答案: