header - MVC3 WebGrid 格式化或样式化列标题

Question

我正在使用新的 MVC3 WebGrid。到目前为止一切顺利，只是在列标题的样式/格式方面存在问题。我得到的最好的解决方法是将 WebGrid 第一行中的相同 css 类应用于表头。

var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");

$.each(firstRowCells, function (index, value) {
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});

这个例子显然缺乏检查以确保有行或确实有指定的元素 id，但它将第一行的 css 类应用到标题行，这意味着您可以彼此独立地设置样式。

td.my-column-style { width:100px }
th.my-column-style { text-align:right;}

是否有一种内置的方式来设置列标题元素的样式（不仅仅是使用 headerStyle 属性）？

Answer 1

不，到目前为止，还没有内置的方法来独立设置标题单元格的样式，只有通过 headerStyle 属性的标题行。

我认为您的解决方法已经足够好了。

Answer 2

我知道这是一个老问题，但这可能对偶然发现它的观众有用。:nth-child css 伪选择器是您的朋友，如果您不想依赖 javascript 来复制类。使用 tableStyle 属性很容易将一个类添加到您的 webgrid，然后您可以使用以下 css 设置各个标题的样式：

.webgridclass tr th:nth-child(1){
    background:#ff0;
}

.webgridclass tr th:nth-child(2){
    background:#f60;
}

不幸的是，这在 IE8 和更早的 IE 中不受支持，但它在所有适当的浏览器（比 FF3 更新）中都完全支持。

Answer 3

我们可以使用Javascript下面的代码来做到这一点。

JsFiddle 示例

$("table tr th:nth-child(n)").addClass("col-md-1");