Question

我正在使用新的MVC3 WebGrid。到目前为止一直很好，只是有问题样式/格式化列标题。我得到的最好的解决方法是将同一个css类从WebGrid的第一行应用到表头。

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 Example

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

MVC3 WebGrid格式化或样式列标题

3 个答案: