Блог

В настоящее время я использую сетку 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; }  

обновленный

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

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

Результат:

Обновить:

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

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

Результат: