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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Я думаю, что ваш обходной путь достаточно хорош.

Answer 3

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

Пример JsFiddle

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