Question

我已经使用WebGrid从MVC应用程序中的内置排序和分页中受益，而且它只能解决一个我无法修复的问题并且在这里寻求任何人的帮助

我的网页格式如下所示

@{
        var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
        grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(columns: grid.Columns(

        grid.Column("Name", "Name", canSort: true),
        grid.Column("Address", "Address", canSort: true),        
        //other columns
        ));
  }

如何根据我的要求修改每列的宽度？（不同列需要不同的宽度）

Answer 1

您可以使用样式：

@grid.GetHtml(columns: grid.Columns(
    grid.Column("Name", "Name", canSort: true, style: "name"),
    grid.Column("Address", "Address", canSort: true, style: "address")
));

并在您的CSS文件中：

.name {
    width: 50px;
}

.address {
    width: 300px;
}

Answer 2

为了增加Darin Dimitrov的好建议，将进一步推荐一个约定（因为CSS促进重用），尝试对常用元素（例如，列）使用现有或常用样式 - 记住你可以应用多种样式，在这里用空格分隔 - 它们将简单地合并到结果属性中。

@{
    var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
    grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(columns: grid.Columns(

    grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"),
    grid.Column("Address", "Address", canSort: true, style: "col-med address"),        
    //other columns
    ));

}

/*styles*/
.col-sm { width: 100px; min-width: 90px; }
.col-med { width: 150px; min-width: 120px; }  <--could be reused
.address { font-weight: bold; } <-- could be reused
.cssOther3 { font-weight: bold; }  <-- may not be as not as reusable
.cssStyle2 { text-align: right; }

因此，换句话说，您不会使用单一样式包，在应用“重用”时继续具有灵活性。

Answer 3

仅限CSS

/*IE7+*/  
th:first-child  { width:30px; }  
th:first-child + th { width:30px; }  
th:first-child + th + th  { width:100px; }  
/*IE9 +*/  
th:nth-of-type(1) { width:30px; }  
th:nth-of-type(2) { width:30px; }  
th:nth-of-type(3) { width:100px; }  
th:nth-of-type(4) { width:200px; }  
th:nth-of-type(5) { width:40px; }

在MVC3中的WebGrid列中应用特定宽度

3 个答案: