Как установить собственный цвет шрифта заголовка webgrid?

Я использую webgrid в своих веб-приложениях mvc с включенной сортировкой.Как установить собственный цвет шрифта заголовка webgrid?

var grid = new WebGrid(
    source: Model, 
    canPage: false, 
    ajaxUpdateContainerId: "mainGrid" 
    );

Если свойство canSort = истина (по умолчанию), то цвет шрифта имен заголовков всегда синий (хотя я использую CSS), но я хочу, чтобы изменить его на другой.

Как я могу сделать это с включенной сортировкой?

Мой код:

Вид:

@grid.GetHtml(
     columns: grid.Columns(
      grid.Column(header: "", columnName: "isChecked", canSort: false, 
       format: @<text><input type="checkbox" name="checkbox_selected" value="@item.index" /></text>), 
      grid.Column(header: "Имя", columnName: "name", style: "name"), 
      grid.Column(header: "Тип", columnName: "type", style: "type"), 
      grid.Column(header: "Дата изменения", columnName: "date", style: "date"), 
      grid.Column(header: "Размер", columnName: "size", style: "size") 
      ), 

     tableStyle: "grid_table", 
     headerStyle: "header_table", 
     rowStyle: "row_table", 
     alternatingRowStyle: "alt-row_table" 
    )

CSS:

.header_table 
{ 
background-color: limegreen; 
color: black; 
padding-bottom: 4px; 
padding-top: 4px; 
}

Все остальные стили работает нормально, но .header_table цвет при сортировке позволило не работает (когда отключена его работает).

источник

2017-02-04 Oleg Esaulov

Пожалуйста, объясните, что вы имеете в виду, когда говорите, что хотите изменить его для другого? – Luke

Я имею в виду другой цвет, т. Е. Не по умолчанию –

Сделайте это с помощью CSS? Это, вероятно, будет полезно для вас ... https://forums.asp.net/t/2036473.aspx?Can+we+change+the+webgrid+column+header+color+when+canSort+true+ проверить второй link – Luke

При визуализации веб-сетки с вашей точки зрения, определить имена классов CSS:

<div> 
    @grid.GetHtml(
      tableStyle: "webgrid-table", 
      headerStyle: "webgrid-header", 
      footerStyle: "webgrid-footer", 
      alternatingRowStyle: "webgrid-alternating-row", 
      selectedRowStyle: "webgrid-selected-row", 
      rowStyle: "webgrid-row-style", 
      mode: WebGridPagerModes.All, 
      columns: 
      // ... more stuff here 
</div>

Теперь мы можем задать стили CSS для сетки и избавиться от синего (я предполагал, что оказанная синий потому, что заголовки содержат ссылки (<a> метки), поэтому второй CSS декларации:

.webgrid-header { color: #FF0000; background-color: #00FF00; } 
.webgrid-header a { color: #FF0000; }

Более подробное объяснение на этой странице: https://stick2basic.wordpress.com/2013/04/10/how-to-set-webgrid-style-in-mvc/

Надеюсь, это поможет!

источник

2017-02-04 10:03:59 Luke

Он работает! Большое спасибо –

Замечательно. Я полагаю, что вам пришлось добавить вторую строку CSS, нацеленную на тег 'a'? – Luke

Да точно! (Я немного новичок в css) –

Как установить собственный цвет шрифта заголовка webgrid?

ответ

Смежные вопросы