MVC3 WebGrid Форматирование или стилизация заголовков столбцов

Я использую новый 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"));
});

В этом примере явно отсутствует проверка, чтобы убедиться, что есть строки или действительно указанный идентификатор элемента, но он применяет класс css от первой строки к строке заголовка, что означает, что вы можете стиль независимо друг от друга.

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

Есть ли встроенный способ стилизации элементов заголовка столбца (не только с использованием свойства headerStyle)?

Ответ 1

Нет, на данный момент нет встроенного способа индивидуального стиля ячеек заголовка, только строка заголовка через свойство headerStyle.

Я думаю, что ваше обходное решение достаточно хорошее.

Ответ 2

Я знаю, что это старый вопрос, но это может быть полезно для зрителей, которые наткнулись на него. Псевдо-селектор nth-child css - ваш друг, если вы не хотите полагаться на javascript для копирования классов. Легко добавить класс в ваш webgrid с помощью свойства tableStyle, а затем вы можете создать отдельные заголовки со следующим битом css:

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

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

К сожалению, это не поддерживается IE8 и более ранним IE, но оно имеет полную поддержку во всех правильных браузерах (новее, чем FF3).

Ответ 3

Мы можем сделать это, используя код Javascript, как показано ниже.

Пример JsFiddle

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