Форматирование или стилизация заголовков столбцов 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)?


header asp.net-mvc-3 coding-style webgrid
person sambomartin    schedule 01.02.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

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

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

person Daniel P    schedule 05.02.2011
comment
@ Джейсон Действительно. WebGrid — это большая катастрофа! - person Rookian; 06.12.2012

arrow_upward
4
arrow_downward

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

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

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

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

person Evert    schedule 04.07.2013

arrow_upward
1
arrow_downward

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

Пример JsFiddle

$("table tr th:nth-child(n)").addClass("col-md-1");
person Govinda Rajbhar    schedule 06.11.2015