Блог

Главная - Вопросы по программированию - Группа строк таблицы стилей AG

Группа строк таблицы стилей AG

#javascript #css #asp.net-core #ag-grid

Вопрос:

В настоящее время я использую сетку AG в своем проекте и реализовал функциональность группы строк для одного из столбцов,

Вот мой код: HTML

 lt;div id="myGrid" style="height: 400px;width:80%; display:none" class="ag-theme-alpine"gt;  lt;/divgt;

JS:

 var gridOptions_PortCd = {  suppressClickEdit: true,  columnDefs: [  { headerName: "Col1", field: "Col1", rowGroup: true, hide: true },    { headerName: "Val1", field: "val2", minWidth: 200 },    ],  defaultColDef: {  sortable: true,  filter: true,  resizable: true,  },  autoGroupColumnDef: {  headerName: 'ColA',  minWidth: 200,  },  groupDisplayType: 'singleColumn',  animateRows: true,  };

Я могу передать сетке некоторые данные JSON, и все выглядит великолепно (я не включаю остальную часть кода, так как не думаю, что это имеет отношение к вопросу).

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

вот как выглядит моя:

майгрид

Извините только за ссылку (поэтому не позволяйте мне вставлять изображение).

В сущности, как мне установить ЦВЕТ ГРУППЫ СТРОК на что-то другое, я пробовал такие вещи, как:

 .ag-theme-alpine .ag-row.ag-row-level-0 {  background-color: #dddbdb!important; }

но это не работает. Я не уверен, почему он выглядит темно-синим, а не просто белым, или серым, или чем-то еще, но я надеюсь изменить его. Какие-нибудь указания?

Цель состоит в том, чтобы это выглядело так (в примере веб-сайта AG GRID)

Пример

Я просмотрел документацию на веб-сайте AG GRID, но они не предоставляют информацию о том, как ее оформить.

РЕДАКТИРОВАТЬ: Я изменил его вот так, и теперь он выглядит так:

 .ag-cell {  background-color: yellow !important; }

обновленный

Ответ №1:

Если вы хотите изменить цвет ячеек в группе строк,попробуйте использовать:

 .ag-cell {  background-color: #dddbdb !important;  }

Результат: введите описание изображения здесь

Обновить:

Попробуйте изменить цвет фона ag-cell-wrapper :

 .ag-cell-wrapper {  background-color: #dddbdb !important;  }

Результат: введите описание изображения здесь

Комментарии:

1. ценю вашу помощь в этом. Пожалуйста, смотрите раздел правка. Он окрашивает строку, но ячейка группы строк по-прежнему выделена. Я просто не понимаю, почему, например, сетка в вашем ответе полностью белая, в то время как цвет задней группы моей групповой строки отличается от цвета

2. Странно, но если у меня нет группы строк, и я просто отображаю данные в сетке, вся сетка выглядит точно так же, как в вашем ответе. В ту минуту, когда я добавляю группу строк, цвет фона меняется на темно-синий или без этого цвета

3. Здравствуйте,я обновил свой ответ,пожалуйста, попробуйте изменить цвет фона ag-cell-wrapper .

4. @потрясающе, жаль, что я не могу проголосовать. Спасибо!

Метки: